如何统计单元测试覆盖率？
不像ava一样，需要使用syc来进行计算，Jest内置了统计单元测试覆盖率的工具，只需要简单配置即可达到相关的要求。具体配置如下：
// package.json { "jest": { "collectCoverage": true, // 是否开启统计单元测试覆盖率 "collectCoverageFrom": [ // 指定统计单元测试覆盖率文件 "**/src/**.js" ], } } |
如何设置单元测试文件不使用ES2015配置
如果你的项目中有.babelrc文件，而你不希望单元测试文件受到babel文件的影响，你可以在jest的配置项中增加transform字段，具体配置如下:
// package.json { "jest": { "transform": {} } } |
如何设置单元测试使用ES2015配置
如果你的单元测试文件中需要使用ES2015后通过babel来进行编译，那么需要对.babelrc文件的配置进行部分修改。
如果你之前在.babelrc文件中，把modules字段设置为false，那么你需要在test环境下重新开启，具体代码如下：
// .babelrc { "presets": [["env", {"modules": false}]], "env": { "test": { "presets": [["env"]] } } } 如果你使用的是babel 7的话（安装时多安装过相关依赖包），你需要设置的presets字段的值应该为@babel/env，具体代码如下： // .babelrc { "presets": [["env", {"modules": false}]], "env": { "test": { "presets": [["@babel/env"]] } } } |
如何处理代码中引用的webpack alias问题
如果我们在项目中使用了webpack，那么我们很大概率会使用到alias相关属性来定义路径。但是，在单元测试框架中，它并不能够识别这种路径，就会出现Cannot find module 'xxx' from 'yyy'的报错。
不像ava框架需要安装插件和进行复杂的配置，我们只需要在Jest中配置moduleNameMapper属性即可满足需求。具体示例如下：
// webpack.config.js { alias: { '@__dir':process.cwd() } } //package.json { "jest": { "moduleNameMapper": { "@__dir(.*)$": "<rootDir>$1" //正则匹配方式，对应webpack alias } } } |
总结
编写测试是一个很好的习惯。
很多人经常都说要对自己的代码进行质量监控，但是又不知道该如何下手。通过这篇文章，你应该学会了如何针对已有代码从零开始编写一套完整的单元测试用例。
如果有任何疑问，欢迎留言或者私信进行沟通与交流。
关于Jest是如何测试JavaScript代码以及Sinon是如何模拟XMLHttpRequest请求的，我们将会在后面几篇博客中给大家带来相关的源码解析，有兴趣的同学可以关注我，留意后续的文章。
