[开发测试]jest搭建前端测试

市面上主流的前端测试框架

1. Jasmine ： JavaScript测试框架（BDD），这个也算是比较早的测试框架。

2. MOCHA: 它是一个功能丰富的JavaScript测试框架，运行在Node.js和浏览器中，使异步测试变得简单有趣。也是非常优秀的框架。

3. 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中使用我们后续探讨。

????????????????

????????????????