React全家桶与前端单元测试艺术

const parked = parkingLot(initial, { type: 'parkingLot/PARK', car: 'Tesla Model S' })

t.deepEqual(parked, ['Tesla Model S'], 'should park Model S in lot')

const picked = parkingLot(parked, { type: 'parkingLot/PICK' })

t.deepEqual(picked, [], 'should remove the car')

})

我们应用 AVA 进行测试，它异常简洁，速度异常快，和 mocha 不合，它默认会启动多线程并发测试。是以我们的测试必须削减共享状况来进步并发才能，不然就会出现意想不到的缺点。安装和运行：

它就是你第一天学测试就会写的那种测试。这些测试不受任何高低文影响，是幂等的。试着把那几个const声明的state挪到任何处所，你都可以发明测试照样精确的，这和我们平常当心翼翼分别各个测试case，并用beforeEach和afterEach重置截然不合。

(图片来本身 http://t.cn/RpwS3AK )

测试Reducer是异常机械的，你不须要问本身“我到底应当测哪些器械”，只须要机械地测试初始state和每个switch case就好了。(小机密：redux-devtools写完实现，在浏览器里打开，反过来还可以主动生成各类框架的测试代码，粘贴回来就行了。推荐不写测试的项目测验测验下，反正白送的测试……并且跟你写的没两样)

跟着营业变得复杂，当state树变大年夜时，我们可以将reducer构造持续往下抽，并持续传递事宜，函数没有this，重构起来比通俗OO要简单得多，就不赘述了。这时刻测试照样完全一样的，这种树形构造包管了我们能最大年夜限度地覆盖一个bounded context—也就是root reducer。

别的更好的方法是用t.is(断言引用雷同)而非t.deepEqual。然则JavaScript对象本身是可变的，惹人 immutable.js 可以让你只用t.is测试，不过immutable的API有点别扭，不展开了。

React是一个View library，它干的活就是DOM domain里的两个事：衬着和捕获事宜。我们在这里依然大年夜简，只用stateless component这个子集，固然在用到生命周期办法的时刻须要用一下class，但绝大年夜多半时刻应当只用stateless component。

它以Virtual DOM的情势封装了恶心的浏览器基本举措措施，让我们以函数和数据构造来描述组件，所以和大年夜部分框架不合，我们的测试依然可以在node上并交运行。如不雅用Karma + Chrome真正地衬着测试，你会发明共享一个浏览器实例的测试异常慢，几乎无法watch测试，是以我们的TDD cycle就会变得不那么流畅了。

最根本的就是 state => UI 这种纯函数组件：

const Greeter = ({ name }) => <p>Greetings {name}!</p>

应用的时刻就锺HTML一样传递attribute就可以了。

最简单的测试照样判等，我们用一个叫 jsx-test-helpers 的库来帮我们衬着：

import { renderJSX, JSX } from 'jsx-test-helpers' 
 
const Paragraph = ({ children }) => <p>{children}</p> 
const Greeter = ({ name }) => <Paragraph>Greetings {name}!</Paragraph> 
 
test('Greeter', t => { 
  t.is(renderJSX(<Greeter name="React"/>),  
       JSX(<Paragraph>Greetings React!</Paragraph>),  
       'should render greeting text with name') 
})

React全家桶与前端单位测试艺术
(图片来本身 http://t.cn/RpwYskG )

View不像营业本身那么稳定，细粒度低成本的快速测试更划算些，这也是为什愦我们的View都只是接收参数衬着，如许你只用测很少的case就能包管View可以精确衬着。假如你的FSM Model有M种可能性，View显示的逻辑有N种，如不雅将两个集成在一路测试可能就须要M×N种Path，如不雅分开测就有M+N种。View和Model的界线清楚时，你的Model测试不轻易被更艰苦的View测试干扰，View测试也削减了混沌程度，须要测试的情况就削减了。

3/6 首页上一页 1 2 3 4 5 6 下一页尾页

　　推荐阅读

　　iOS中关于列表滚动流畅的一些探讨

如不雅说有什么好的博客文┞仿推荐，ibireme 的 iOS 保持界面流畅的技能这篇堪称业界毒瘤，墙裂推荐反复浏览。这篇文┞仿中讲解了很多的优化点，我本身总结了下收益最大年夜的两个优化点>>>详细阅读

本文标题：React全家桶与前端单元测试艺术

地址：http://www.17bianji.com/lsqh/37291.html

1/2 1