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

我们的组件不该该只有衬着，还有事宜，比如我们封装个TextField组件：

const TextField = ({ label, onChange }) => <label> 
  {label} 
  <input type="text" onChange={onChange} /> 
</label>

当然我们还可以判等，只要onChange函数引用雷同就好了。

test('TextField', t => { 
  const onChange = () => {} 
  const actual = renderJSX(<TextField label="Email" onChange={onChange} />) 
  const expected = JSX(<label> 
    Email 
    <input type="text" onChange={onChange}/> 
  </label>) 
  t.is(actual, expected) 
})

这是一个简化版的代码，去掉落了抛错等等细节，但功能是完全的。把你本身写的reducer扔进去，然后可以发事沂攀来使其更新，你还可以订阅它来拿状况。有点像 Event Sourcing ，以消息而非调用来处理逻辑，更新和订阅的逻辑不在一路(事宜是写模型，各类view就是多个读模型)。

当然有时刻你的组件更复杂些，测试时并不关怀组件是不是完全按你想要的样子衬着，可能你想像 jQuery 一样选择什么，触发什么。如许可以用更主流的 enzyme 来测试：

import {shallow} from 'enzyme' 
import sinon from 'sinon' 
 
test('TextField with enzyme', t => { 
  const onChange = sinon.spy() 
  const wrapper = shallow(<TextField label="Email" onChange={onChange} />) 
  t.true(wrapper.contains(<label>Email</label>), 'should render label') 
 
  const event = { target: { value: 'foo@bar.com' } } 
  wrapper.find('input').simulate('change', event) 
  t.true(onChange.calledWith(event)) 
})

这里用的shallow顾名思义，也是向下衬着一层。此外我们还用了spy，如许测试就变得有点复杂了，损掉落了我们之前声明式的优雅，所以组件照样小一点、一下测完比较好。

还不敷快?Facebook就认为不敷快，他们认为View测试成本比较浪费，干脆搞了个Snapshot测试——意思就是照个像，只断言它不变。下次谁改了其余处所不当心影响到这里，就会挂掉落，如不雅无意的就修好，如不雅有意的话和git一样commit一下就修好了：

import render from 'react-test-renderer' 
 
test('Greeter', t => { 
  const tree = render.create(<Greeter name="React"/>).toJSON() 
  t.snapshot(tree, 'should not change') 
})

当你修改Greeter的时刻，测试就会挂掉落，这时刻运行：

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

　　推荐阅读

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

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

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

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

1/2 1