前端测试框架Jest和 Cypress

最新推荐文章于 2025-05-09 23:45:47 发布

梦醒在笑

最新推荐文章于 2025-05-09 23:45:47 发布

阅读量2.8k

点赞数 1

分类专栏：前端 JAVASCRIPT 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/mengsandy/article/details/105863989

版权

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

JAVASCRIPT

18 篇文章

订阅专栏

本文介绍Jest和Cypress两种流行的测试框架。Jest由Facebook开发，适用于前端项目单元测试，自动集成断言、JSDom等功能。Cypress则侧重于端到端功能测试，提供录屏和自动化测试支持，适合完整项目测试。两者各有所长，选择取决于具体需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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('/');
    });
});