基于Jest+Enzyme的React单元测试

2018-09-26  本文已影响0人  宁小姐的慢时光

本文为实践的产物,总结从搭建到使用过程中遇到的问题,初学者可以参考。

Jest、Enzyme介绍
Jest是Facebook发布的一个开源的、基于Jasmine框架的JavaScript单元测试工具,支持断言、仿真、快照测试、测试覆盖率报告等。

Enzyme获得React 官方的推荐,Airbnb开源的React测试类库Enzyme提供了一套简介强大的API,并通过jQuery风格的方式进行DOM处理,开发体检十分友好。

强烈推荐阅读使用jest+enzyme进行react项目测试 - 介绍篇

测试环境搭建
在开发React应用的基础上,需要安装Jest、Enzyme以及对应的babel-jest。
使用 yarn 安装 Jest︰
yarn add --dev jest enzyme babel-jest

npm
npm install --save-dev jest enzyme babel-jest

将下面的配置部分添加到package.json 里面:

{
  "scripts": {
    "test": "jest"
  } 
"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      ".*\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  },
}

然后,创建xx.test.js的文件,写实际的测试逻辑
最后,运行yarn test

测试脚本编写
强烈推荐阅读使用jest+enzyme进行react项目测试 - 测试手法篇
测试用例写法总结

运行并调试
在运行测试脚本过程,Jest 的错误提示信息友好,通过错误信息一般都能找到问题的所在。 同时 Jest 还提供了生成测试覆盖率报告的命令,只需要在package.json 里配置{ "scripts": { "test": "jest --coverage " } 即可生成。会在终端中显示如下报告:

image.png
而且还会在项目中生成 coverage 文件夹,非常方便。

匹配器使用
推荐阅读:
前端测试框架Jest系列教程 -- Matchers(匹配器)
Javascript单元测试工具-Jest 学习笔记(一)

测试异步代码
推荐阅读:
Javascript单元测试工具-Jest 学习笔记(一)
学习Jest——语法篇

遇到的问题
Image.onload不能被监听到
解决办法参考:https://zhuanlan.zhihu.com/p/37329102
我采用了自己 mock Image 构造函数方案

最后,在写测试用例过程中,不知道用什么匹配器,可以来Jest官网搜罗一圈https://jestjs.io/docs/zh-Hans/expect
不知道使用Enzyme什么API时,也来Enzyme搜罗一圈http://airbnb.io/enzyme/docs/api/
总能找到你想要的~

参考资料
https://zhuanlan.zhihu.com/p/26625269

上一篇 下一篇

猜你喜欢

热点阅读