市面上主流的前端测试框架
-
Jasmine : JavaScript测试框架(BDD),这个也算是比较早的测试框架。
-
MOCHA: 它是一个功能丰富的JavaScript测试框架,运行在
Node.js
和浏览器中,使异步测试变得简单有趣。也是非常优秀的框架。 -
Jest:目前最流行的前端测试框架,几乎国内所有的大型互联网公司都在使用
之前有安装过karma+mocha+chai+webpack,不过配置起来有些繁琐。jest作为目前最流行的测试框架,安装配置比较简单,容易上手。我们今天来配置jest应用在普通的前端(不使用前端框架)。
一、创建项目安装组件
1、创建项目目录
项目目录为 mytest-jest
2、npm初始化项目
进入 mytest-jest 目录,命令行中 npm init -y,初始化完成后生成pachage.json
3、安装jest
命令行 npm i jest -D
4、配置package.json
scripts 中增加 "test": "jest"
5、创建文件和测试文件
src\sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
test\sum.test.js
const sum = require('../src/sum.js');
test('adds 2 + 3 to equal 5', () => {
expect(sum(2, 3)).toBe(5);
});
6、开始测试
命令行中运行 npm test ,看到如下测试结果
7、生成覆盖率的html文件
配置package.json中script项中"test": "jest --coverage"
运行npm test,项目根目录多了一个coverage目录其中lcov-report目录中的index.html是生成的覆盖率文件。
打开index.html文件
到此,简单的使用jest进行前端测试,我们就ok了。不过我们发现上面测试文件中导入模块const sum = require('../src/sum.js');用的是commonjs的语法,如果我们想使用ES6的模块化语法要怎么办呢?直接使用import export 会报错。
7、兼容ES6语法
npm install @babel/core@7.4.5 @babel/preset-env@7.4.5 -D
项目根目录创建或修改.babelrc文件:
{
"presets":[
[
"@babel/preset-env",{
"targets":{
"node":"current"
}
}
]
]
}
修改代码为ES6的模块化语法
src\sum.js
export function sum(a, b) {
return a + b;
}
test\sum.test.js
import {sum} form '../src/sum.js';
test('adds 2 + 3 to equal 5', () => {
expect(sum(2, 3)).toBe(5);
});
运行npm test ,看看是不是运行正常,生成了测试报告了。
8、生成jset配置文件
很多时候我们需要在默认配置的基础上进行个性化的配置,这时候我们需要用到jest的配置文件。
使用 npx jest --init ,初始化生成jest.config.js 配置文件。
至此,jest在前端的配置我们就完成了,配置文件配置项详细说明我们后续深入探讨。在vue中使用我们后续探讨。