前端jest（vitest）单元测试快速手上

前言

vitest和jest除了配置上不同，其他的基本差不多，这里以jest为例进行说明

---

安装依赖

npm install -D jest

编写测试

例如，我们将编写一个简单的测试来验证将两个数字相加的函数的输出。

sum.js

export function sum(a, b) {
  return a + b
}

sum.test.js / sum.spec.js

import { describe, expect, test } from "jest";
import { sum } from "./sum";

describe("sum function", () => {
	test("adds 1 + 2 to equal 3", () => {
		expect(sum(1, 2)).toBe(3);
	});
	...
});

运行测试

在 package.json 中添加以下脚本

"scripts": {
  "test": "jest"
}

同理如果用的是vitest则为"test": "vitest"

之后运行npm run test便可以测试了，测试不通过会在控制台报错

自定义配置

创建jest.config.js

module.exports = {
  testEnvironment: 'node', // 或者 'jsdom' 用于浏览器环境测试
  testMatch: ['**/__tests__/**/*.test.js', '**/?(*.)+(spec|test).js'], // 测试文件匹配模式
};

如果是vitest
在 vite.config.js 或者创建 vitest.config.js 进行配置

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    environment: 'jsdom', // 或者 'node'
    include: ['**/__tests__/**/*.test.js', '**/?(*.)+(spec|test).js'], // 测试文件匹配模式
  },
});