基于Jest+Enzyme的React单元测试

为什么需要单元测试?

安全重构已有代码、快速回归已有功能、保存业务上下文

组件UI测试用snapshot

snapshot 可以测试到组件的渲染结果是否符合预期,预期就是指你上一次录入保存的结果,toMatchSnapshot 方法会去帮你对比这次将要生成的结构与上次的区别

DOM交互测试用Jest+Enzyme

enzyme有3种渲染方式:render、mount、shallow
render、mount、shallow的区别
enzyme有3种渲染方式:render、mount、shallow

render、mount、shallow的区别

render采用的是第三方库Cheerio的渲染,渲染结果是普通的html结构

shallow和mount对组件的渲染结果不是html的dom树,而是react树

shallow只渲染当前组件,只能能对当前组件做断言

mount会渲染当前组件以及所有子组件

交互测试

主要利用simulate()接口模拟事件,实际上simulate是通过触发事件绑定函数,来模拟事件的触发.

原则

  • 明确的功能点
  • 输入值、输出值、边缘数据校验(特别是工具类型的单元
  • 测试过程中出现 Bug 的情况
posted @ 2020-05-10 13:10  浮云随笔  阅读(484)  评论(0编辑  收藏  举报