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

就好了。Facebook自家的 Jest 对snapshot的支撑更好，当snapshot不匹配时按个y/n就完事了，够快了吧。要有更快的可能就是不测了……

小结

这节里我们展示了3种测试View的不合方法，它们都比传统框架更简单更快速。我们的思路照样以判等为主，但不合于Model，粒度越大年夜越好。View测试粒度越小越好，足够小、足够幂等之后，其实不消测试你也可以发明组件老是按照预期工作。比拟之下MVVM天然有一种让View和Model粒度拟合的偏向，很轻易让测试变得艰苦测又缺乏价值。

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

异步Effect测试

这算个续集……异步操作不复杂的项目可以疏忽这段，可以选择性不测。

React先解决了恶心的DOM问题，把Model的问题留下了。然后Redux把同步逻辑解决了，其噬习端还留下异步操作的大年夜问题没有解决。这种类似“Unix只做一件事”的┞奋学是React全家桶的基本。我们用一个叫做 Redux-saga 的库来展示全家桶的异步测试怎么写，Redux模仿的目标是 Elm architecture，然则简化掉落了Elm的感化模型，只保存了同步模型，Redux-saga其实就是把Elm的感化模型又拿回来了。

这里我多加了一层叫做Paragraph的组件，它的感化仅仅是传递给p标签，children这个prop表示XML标签传进来的子元素。多加这层Paragraph是为了展示renderJSX只向下衬着了一层，而非最终须要衬着的p标签。如许我们在View上的测试粒度就会变得更小，成本更低，速度更快。

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

Saga是一种worker模式，很早之前在Java社区就存在了。Redux-saga抽象出来多种通用的感化比如call / takeEvery等等，然后有了这些感化，我们又可以高兴地判等了。比如：

import { takeEvery, put, call, fork, cancel } from 'redux-saga/effects' 
 
function *account() { 
  yield call(takeEvery, 'login/REQUESTED', login) 
} 
function *login({ name, password }) { 
  try { 
    const { token } = yield call(fetch, '/login', { method: 'POST', body: { name, password } }) 
    yield put({ type: 'login/SUCCEEDED', token }) 
  } 
  catch (error) { 
    yield put ({ type: 'login/FAILED', error }) 
  } 
}

这段代码乍看起来很丑，这是因为它把法度榜样里所有异步操作全都集中在本身身上了。其他部分都可以高兴地发同尘事宜了，此外有了Saga之后Redux终于有了“用事宜触发事宜”的机制了，只用redux，应用复杂到必定程度你必定会想这个问题的。

test('account saga', t => { 
  const gen = account() 
  t.deepEqual(gen.next().value, call(takeEvery, 'login/REQUESTED', login)) 
}) 
 
test('login saga', t => { 
  const gen = login({ name: 'John', password: 'super-secret-123'}) 	
			 5/6   首页 上一页 3 4 5 6 下一页 尾页	
			

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


本文标题：React全家桶与前端单元测试艺术
地址：http://www.17bianji.com/lsqh/37291.html
 1/2    1