目录 第一部分：为什么必须做单元测试 单元测试的上下文 测试策略——测试金字塔 TDD——单元测试的核心灵魂 第二部分：什么是好的单元测试 第三部分：React 单元测试策略 第四部分：React 单元测试落地...单元测试的上下文 “为什么我们需要做单元测试”，这是一个关键的问题。往小了说，不做单元测试的代码无法保证后续不被破坏，无法重构，只能看着代码腐化；往大了说，不做单元测试的团队响应力不可能提高。 ?...在实际的项目上副作用还有其他的中间层进行处理，比如 redux-thunk、redux-promise 等，本质是一样的，只不过 saga 在测试性上要好一些。这一层副作用怎么测试呢？...Emit 的事件、需要保存到 IndexDB 中去的数据等） 来自官方的错误姿势 redux-saga 官方提供了一个 util: CloneableGenerator用以帮我们写 saga 的测试。...基于这个发现，我们推出了我们的第二版 saga 测试方案：runSaga + 自定义拓展 jest 的 expect 断言。
项目用到的技术框架 该项目采用 react 技术栈，用到的主要框架包括：react、 redux、 react-redux、 redux-actions、 reselect、 redux-saga、 seamless-immutable...，我们先来说下测试 saga 的原理。...这个测试用例的步骤就是利用生成器函数一步步的产生下一个 effect ，然后断言比较。 从上面的注释 3、4 可以看到， redux-saga 还提供了一些辅助函数来方便的处理分支断点。...这也是我选择 redux-saga 的原因：强大并且利于测试。 api 和 fetch 工具库 接下来就是api 层相关的了。...主要注意 fetch 是 promise 返回， jest 的各种异步测试方案都能很好满足。
，页面就无法加载出来。...Redux 请求中间件如何处理并发使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。...redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等redux-saga缺陷:额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗
redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等redux-saga缺陷:额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗...属性 to: string：重定向的 URL 字符串属性 to: object：重定向的 location 对象属性 push: bool：若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面
redux-saga redux-saga 是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单...redux-saga 使用了 ES6 的 Generator 功能，让异步的流程更易于读取，写入和测试。...（有点像 async/await，但 Generator 还有一些更棒而且我们也需要的功能）。 你可能已经用了 redux-thunk 来处理数据的读取。...不同于 redux thunk，你不会再遇到回调地狱了，你可以很容易地测试异步流程并保持你的 action 是干净的。...redux-saga与其他redux中间件比较 •redux-thunk 的缺点在于api层与store耦合，优点是可以获取到各个异步操作时期状态的值，比较灵活，易于控制 •redux-promise的优点是
redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等redux-saga缺陷:额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗...状态(state)和属性(props)之间有何不同State 是一种数据结构，用于组件挂载时所需数据的默认值。
放到 race 方法里以自动取消 redux-saga 使用了 ES6 的 Generator 功能，让异步的流程更易于读取，写入和测试。...不同于 redux thunk，你不会再遇到回调地狱了，你可以很容易地测试异步流程并保持你的 action 是干净的。...redux-saga 使用 PUT 来描述dispatch 一个 action 到 Store 而不是直接dispatch action 的原因也是为了方便测试。...反向控制 在 takeEvery 的情况中，被调用的任务无法控制何时被调用， 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听。...注意 fork 类似于 call，fork 的调用是非阻塞的， yield fork(fn …args) 的结果是一个 Task 对象 —— 一个具备着某些实用方法及属性的对象。
redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等redux-saga缺陷:额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗...HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...（1）使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...时，该action的函数体会自动执行 store.dispatch(action) } （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js...: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀...个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator
输出（渲染）只取决于输入（属性），无副作用 视图和数据的解耦分离 缺点： 无法使用 ref 无生命周期方法 无法控制组件的重渲染，因为无法使用shouldComponentUpdate 方法，当组件接受到新的属性时则会重渲染...redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...时，该action的函数体会自动执行 store.dispatch(action) } （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js...: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀...个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator
a.异步 actions (副作用) ·Redux Thunk ·Redux Better Promise ·Redux...Saga ·Redux Observable b.数据持久化 ·Redux Persist ·Redux Phoenix...Relay ·urql 11.工具库 ○Lodash ○Moment ○classnames ○Numeral ○RxJS ○Ramda 12.测试...i.单元测试 ·Jest ·Enzyme ·Sinon ·Mocha ·Chai ·AVA ·Tape ii.端到端测试...·Selenium, Webdriver ·Cypress ·Puppeteer ·Cucumber.js iii.集成测试 ·Karma 13.国际化
（1）声明式的Effect redux-saga中最大的特点就是提供了声明式的Effect，声明式的Effect使得redux-saga监听原始js对象形式的action，并且可以方便单元测试，我们一一来看...通过使用Effect类函数，可以方便单元测试，我们不需要测试副作用函数的返回结果。只需要比较执行Effect方法后返回的描述对象，与我们所期望的描述对象是否相同即可。...，这里先提一笔，fork方法相当于web work，fork方法不会阻塞主线程，在非阻塞调用中十分有用。...)之后的语句 const action2=yieldtake(‘TO_LOGIN_OUT’)在call方法返回结果之前无法执行 在延迟期间的登出操作会被忽略。...通过转化effects函数，可以方便进行单元测试 完善和严谨的流程控制，可以较为清晰的控制复杂的逻辑。
作为一个Redux中间件，想让Redux应用中的副作用（即依赖/影响外部环境的不纯的部分）处理起来更优雅 二.设计理念 Saga像个独立线程一样，专门负责处理副作用，多个Saga可以串行/并行组合起来，...on the Saga concept 三.核心实现 利用generator，让异步流程控制易读、优雅、易测试 In redux-saga, Sagas are implemented using Generator...Effect层存在的主要意义是为了易测试性，所以用简单的描述对象来表示操作，多这样一层指令 虽然可以直接yield Promise（比如上面核心实现里的示例），但测试case中无法比较两个promise...所以添一层描述对象来解决这个问题，测试case中可以简单比较描述对象，实际起作用的Promise由redux-saga内部生成 这样做的好处是单测中不用mock异步方法（一般单测中会把所有异步方法替换掉...术语Saga指的是一系列操作的集合，是个运行时的抽象概念 redux-saga里的Saga形式上是generator，用来描述一组操作，而generator是个具体的静态概念 P.S.redux-saga
redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...（1）使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...时，该action的函数体会自动执行 store.dispatch(action) } 复制代码 （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...功能强⼤: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来...,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator
如果不需要支持低版本 IE 的话，我们主要使用 React： React – 编写页面组件 Redux – 数据流和状态管理，一般结合 redux-saga 使用 React-router v4 – 前端路由管理...（Note：dva 整合了 redux, redux-router 以及 redux-saga。...在熟悉了基本的 Redux, Redux-saga, Redux-router 的使用之后，可以尝试用 dva 替代） Webpack – 前端构建工具 用到的其他类库，技术选择和工具 前端开发我在用到的其他类库...AutoPrefixer – PostCSS 插件，构建时根据 caniuse-lite 数据库以及你设置的或者默认的浏览器列表（browserslist）给 CSS 属性自动增加浏览器厂商前缀。...Ava, Chai.js, Jest, Enzyme, Headless Chrome – 测试框架，runner，断言库，单元测试，组件测试，端对端测试的一些工具。
(机械也是极限的一部分，你不应该在使用工具过程中面临太多抉择，而应当专注于将业务翻译成测试)。 为什么谈React全家桶？...如果用Karma + Chrome真正地渲染测试，你会发现共享一个浏览器实例的测试非常慢，几乎无法watch测试，因此我们的TDD cycle就会变得不那么流畅了。...我们用一个叫做Redux-saga的库来展现全家桶的异步测试怎么写，Redux模仿的目标是Elm architecture，但是简化掉了Elm的作用模型，只保留了同步模型，Redux-saga其实就是把...Saga是一种worker模式，很早之前在Java社区就存在了。Redux-saga抽象出来多种通用的作用比如call / takeEvery等等，然后有了这些作用，我们又可以愉快地判等了。...其他部分都可以开心地发同步事件了，此外有了Saga之后Redux终于有了“用事件触发事件”的机制了，只用redux，应用复杂到一定程度你一定会想这个问题的。
缺点：无法在 return 语句外访问数据、嵌套写法不够优雅 （3）Hooks 官方解释∶ Hook是 React 16.8 的新增特性。...redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...时，该action的函数体会自动执行 store.dispatch(action)}复制代码 （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...功能强⼤: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来...,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator
缺点：无法在 return 语句外访问数据、嵌套写法不够优雅 （3）Hooks 官方解释∶ Hook是 React 16.8 的新增特性。...redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...时，该action的函数体会自动执行 store.dispatch(action) } 复制代码 （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...功能强⼤: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来...,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator
function 的 saga 实现，代码异常/请求失败 都可以直接通过 try/catch 语法直接捕获处理 功能强大: redux-saga提供了大量的Saga 辅助函数和Effect 创建器供开发者使用...,开发者无须封装或者简单封装即可使用 灵活: redux-saga可以将多个Saga可以串行/并行组合起来,形成一个非常实用的异步flow 易测试，提供了各种case的测试方案，包括mock task，...分支覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使用难以理解的 generator function,而且有数十个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的...缺陷: 学习成本奇高: 如果你不会rxjs,则需要额外学习两个复杂的库 社区一般: redux-observable的下载量只有redux-saga的1/5,社区也不够活跃,在复杂异步流中间件这个层面redux-saga...仍处于领导地位 关于redux-saga与redux- observable的详细比较可见此链接
redux-thunk优点：体积⼩：redux-thunk的实现⽅式很简单，只有不到20⾏代码；使⽤简单：redux-thunk没有引⼊像redux-saga或者redux-observable额外的范式.../catch语法直接捕获处理；功能强⼤：redux-saga提供了⼤量的Saga辅助函数和Effect创建器供开发者使⽤，开发者⽆须封装或者简单封装即可使⽤；灵活：redux-saga可以将多个Saga...可以串⾏/并⾏组合起来，形成⼀个⾮常实⽤的异步flow；易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等。...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的...redux-observable缺陷：学习成本奇⾼：如果你不会rxjs，则需要额外学习两个复杂的库；社区⼀般：redux-observable的下载量只有redux-saga的1/5，社区也不够活跃，在复杂异步流中间件这个层
领取专属 10元无门槛券
手把手带您无忧上云
