基于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 的情况