前言
在上一篇文章中,葱哥从零开始创建了一个react的boilerplate,并使用webpack进行build,使其支持ES6,同时使用karma+mocha等进行单元测试。虽然单元测试有了,但是代码中哪些写了测试,哪些没写呢?本文就将在上一篇文章的基础上为其增加生成代码覆盖率的功能。
代码
本文的最终代码可以在react_boilerplate_v8中查看。
准备工作
react boilerplate代码
首先拿到上一篇文章的代码:
|
在正式开始之前,我们将对之前的代码做一些简单的修改,app
目录用于存放源代码,test
目录用于存放测试文件,文件结构如下:
|
|
其中components
目录用于存放React组件,其中有两个小的示例。具体代码可以参考Github.
build和test
现在在我们的项目目录下可以通过如下命令来运行和测试代码了。
|
|
测试代码覆盖率
安装插件
除了我们已经安装好的karma-webpack
、karma-sourcemap-loader
等插件外,我们要实现测试代码的覆盖率检测,还需要安装如下插件:
要支持React的测试代码覆盖率,还需要:
修改karma配置文件
在karma.config.js
文件中,添加对coverage插件的支持,修改后代码如下:
此处复用了webpack的配置文件webpack.config.js
。当然也可以直接将webpack的配置文件写在karma.config.js
中。
修改test.webpack.js文件
在test.webpack.js
文件中引入所要测试的源代码和测试用例文件,如下:
注意,这里如果没有添加./app
,则没有写测试用例的文件(本例中的FooBar.js
)就不会出现在coverage的report中。
运行测试
运行命令npm run test
运行karma测试,命令行中显示结果:
同时,在我们的项目目录下生成了一个新的文件夹:coverage:
|
|
打开其中的html文件index.html
,即可查看生成的测试覆盖率报告。
本文的所有代码可以在react_boilerplate_v8中查看。
参考链接
http://krasimirtsonev.com/blog/article/a-modern-react-starter-pack-based-on-webpack
http://nicolasgallagher.com/how-to-test-react-components-karma-webpack/
https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack
https://github.com/zyml/es6-karma-jasmine-webpack-boilerplate
https://github.com/isaacs/node-glob