前言

文章有点长 ，所以分为四个部分，关注我持续更新

• jest配置以及简单使用
• jest高级使用
• jest如何在vue中测试
• 如何用pupperteer配合jest做自动化测试

背景

前端自动化测试是保证产品质量的重要手段之一，可以有效地减少手工测试的工作量，提高测试的覆盖率和效率。便于我们能够在代码变更后快速地运行测试用例，及时发现问题，以便在最短的时间内解决

技术

• Jest: 作为测试框架，Jest 是一个开箱即用的工具，它支持常见的测试场景，并且提供了一些强大的功能，如自动化测试、测试覆盖率、快照测试等。
• Puppeteer: 作为浏览器自动化工具，Puppeteer 提供了一套 API，可以模拟浏览器的行为，如点击、输入、跳转等操作。

思路

jest安装和使用

安装

# 安装 jest
pnpm add jest --save-dev
# 使用ts
pnpm add --save-dev @babel/preset-typescript ts-jest @types/jest
# 美化报告
pnpm add jest-html-reporters --save-dev

在项目根目录中创建一个名为 `jest.config.js` 的文件，用于配置 Jest。常用的配置选项包括：

• `testEnvironment`: 测试环境，如 jsdom、node 等
• `testMatch`: 匹配测试用例的正则表达式
• `transform`: 将测试文件中的 JavaScript 代码转换为可执行的代码
• `moduleNameMapper`: 将模块名称映射到实际路径
• `setupFiles`: 在运行测试用例之前执行的脚本文件
• `collectCoverage`: 是否统计代码覆盖率
• `coverageReporters`: 代码覆盖率报告格式，如 text、html、lcov 等

/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
  collectCoverage: true,
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    //"**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  // 报告插件
  "reporters": [
    "default",
    ["./node_modules/jest-html-reporters", {
      "pageTitle": "测试报告",
      "publicPath": "./report/jest",
      "filename": 'report.html',
      "includeFailureMsg": true,
      "expand": true
    }]
  ]
};

配置babel.config

// babel.config.cjs
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

简单测试用例

根据jest.config.js配置新建`__tests__/utils.test.ts`

在项目中新建 src/utils/index.ts

// src/utils/index.ts
export function sum(a: number, b: number) {
  if (a + b > 10) return 10
  return a + b
}

// __tests__/utils.test.ts
import { sum } from '../src/utils/index'
describe('测试Utils', async () => {
  // 
  expect(sum(1, 2)).toBe(3)
  // 大小比较
  expect(12).toBeGreaterThan(10);
  expect(12).toBeLessThan(10);
  // 对象
  expect({one: 1, two: 2}).toEqual({one: 1, two: 2});
 	expect([1, 2, 3]).toHaveLength(3);
  
  // null、undefined
  const n = null;
  expect(n).toBeNull();
 	expect(n).not.toBeUndefined();
  expect(undefined).toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
  // 异步
  const a = await Promise.resolve(1)
  expect(a).toBe(1)
  expect(Promise.resolve(1)).resolves.toBe(1)
  // 回调
  it('回调', done => {
    function fetchData(callback: any) {
      setTimeout(() => {
        callback(1)
      }, 1000);
    }
    fetchData((res: any) => {
      expect(res).toBe(1)
      done()
    })
  }) 
})
// 执行顺序, 以下依次执行
beforeAll
beforeEach
afterEach
afterAll