从vue源码看测试集成
从测试命令开始:
入口测试指令npm run test;
在package.json 当中;
1 | "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex", |
前三条是语法检测,按照各自的代码格式或者语法配置说明配置好之后就能顺利跑起来,并且带自动纠正功能。
npm run test:cover
1 | "test:cover": "karma start test/unit/karma.cover.config.js" |
单元测试部分,能够生成测试覆盖率报告;
首先看入口测试配置:karma.cover.config.js;
第一行导入了所有测试都引入的基本配置文件karma.base.config.js;其中定义了单元测试的基本框架以及入口文件等;
结合两份配置分析。
首先是一些基本概念:
- Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。
- Jasmine是单元测试框架,本单将介绍用Karma让Jasmine测试自动化完成。
- istanbul是一个单元测试代码覆盖率检查工具,可以很直观地告诉我们,单元测试对代码的控制程度。
使用karma框架
karma配置中定义了:
- 使用Jasmine单元测试框架;
- karma-webpack 的基本配置(对于模块化的源代码,需要使用webpack进行预处理);
- 待测试的文件和测试文件的总入口:’index.js’(在index.js中通过require.content来动态引入需要测试的文件,减少源码更改之后测试配置改动的需求);
- 定义js文件需要使用的预处理器:[‘webpack’,’sourcemap’];
- 使用phantomjs无头浏览器,不实例化页面,加快测试速度;
- 报告类型选用[‘mocha’, ‘coverage’];其中 karma-mocha-reporter用来更改报告样式;coverage用来生成测试覆盖率报告;
- coverageReporter配置测试覆盖率报告的风格,已经报告生成目录;
注意的点:
一般我们在配置测试覆盖率的时候写法是:
1 | preprocessors: { |
使用coverage预处理把src目录下的所有js文件全都加入覆盖率统计当中;
但是使用karma-coverage检测Webpack打包后的代码,会出现覆盖率出错的情况,因为一般代码覆盖率的检测是需要统计被测试代码中需要测试的量,比如函数、行数等信息,然而打包后的代码因为被混入了很多别的代码,或者是变量被私有化了,这些统计就会出问题。
在这里作者使用了babel-plugin-istanbul
插件在代码打包之前进行统计;
自此,单元测试配置基本解决;剩下的就是测试代码的编写;
遵循jasmine使用规范;使用describe加回调函数的套件;一步步完成对源代码的测试用例编写;完善覆盖率
npm run test:e2e
端对端测试