JavaScript 中怎么使用 Vitest 对前端工具函数进行单元测试-js教程-PHP中文网

vitest测试前端工具函数轻量高效，核心是抽离逻辑、隔离副作用、明确输入输出，纯node环境即可运行。需安装配置vitest，编写纯函数，覆盖多场景测试，mock异步依赖，并支持命令行与vs code调试。

javascript 中怎么使用 vitest 对前端工具函数进行单元测试

直接用 Vitest 测试前端工具函数非常轻量，核心是把函数逻辑抽离、隔离副作用、写清楚输入输出关系。不需要 DOM、不依赖浏览器环境，纯 Node 下就能跑通。

准备测试环境

安装 Vitest 并配置脚本：

运行 npm install -D vitest
在 package.json 的 scripts 中加入：
"test": "vitest"
可选但推荐：新建 vitest.config.js，启用原生 TypeScript 和 ESM 支持（Vitest 默认已支持，无需额外编译）

编写可测的工具函数

避免副作用，让函数“纯”一点，才容易验证：

❌ 不要直接调用 Date.now()、Math.random()、localStorage 等不可控源
✅ 改为接收参数或依赖注入，例如：
function formatDate(date = new Date(), format = 'YYYY-MM-DD') { ... }
❌ 不要修改传入对象（如 obj.id = 1），易造成测试污染
✅ 返回新对象或明确标注行为，例如：
return { ...obj, id: 1 }

写第一个测试文件

假设你有一个工具函数 src/utils/isEmpty.js：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

export function isEmpty(value) {
  return value == null || value === '' || (Array.isArray(value) && value.length === 0);
}

对应测试文件 src/utils/isEmpty.test.js：

import { expect, test } from 'vitest';
import { isEmpty } from './isEmpty';

test('returns true for null', () => {
  expect(isEmpty(null)).toBe(true);
});

test('returns true for empty string', () => {
  expect(isEmpty('')).toBe(true);
});

test('returns false for non-empty array', () => {
  expect(isEmpty([1])).toBe(false);
});

每个 test 只覆盖一种明确场景
用 toBe 测原始值，用 toEqual 测对象/数组深层相等
文件名必须含 .test. 或 .spec.（如 .test.js、.spec.ts）

处理异步和外部依赖

如果工具函数涉及 fetch、定时器或第三方调用，必须 Mock：

用 vi.mock() 替换模块，例如模拟 fetch：

vi.mock('node-fetch', async () => ({
    default: vi.fn().mockResolvedValue({ json: () => ({ id: 1 }) })
  }));

对 setTimeout 等全局 API，可用 vi.useFakeTimers() 控制时间流
异步测试记得加 async/await 或返回 Promise，并在 expect 后显式断言

运行与调试

命令行运行：npm run test，默认监听文件变化；加 --run 可一次性执行。

VS Code 中调试更直观：

在测试代码里打上断点（比如 expect(...) 前一行）
右键选择 Debug Test（Vitest 插件支持）
确保 vitest.config.js 中 test.environmentOptions 或 browser 配置未禁用 sourceMap

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南