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