前端测试框架Jest和 Cypress

Jest 单元测试

Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具。可以在REACT或VUE前端项目中使用。

1、 安装

npm i -D jest vue-jest babel-jest @vue/test-utils
npm i babel-core@^7.0.0-0 eslint-plugin-jest @babel/preset-env -D

2、编写配置
jest.conf.js、配置 Babel、ESLint配置等。

3、编写测试文件
默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件。

测试规范示例， Jest 的断言 API：

import { mount } from '@vue/test-utils'
import Component from './component'

describe('Component', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Component)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

4、开始测试

npm test

5、官网
打开的很慢
https://jestjs.io/

Cypress前端测试

Cypress是即end to end（端到端）功能测试框架，它基于node js，Jquery。开箱即用，不仅支持本地浏览器直接模拟测试，也支持终端测试。还有测试录屏功能，方便在测试失败的时候，查看当时的失败的场景，方便定位。

1、安装

npm install cypress --save-dev

也可直接下载安装包
https://download.cypress.io

2、使用

在package.json中加入

"cypress": "cypress run","cypress-gui": "cypress open"

快捷执行方式。
在根目录中的cypress/integration中创建js执行脚本文件。

// cypress/integration/test.cypress.test.js
describe('测试', () => {    // 测试用例触发前调用的函数钩子
    before(() => {        // 进入测试页面
        cy.visit('/');
    });
});

最后

npm run cypress

两者的区别

Jest是和前端框架项目结合的更加紧密，更加适合前端开发人员自测，适合单元测试。

而Cypress整合了各种测试功能，包括录屏，自动化测试，对测试项目来说更加整体，更加适合测试一个完整的项目。

OVER