Vitest 入门到实战：手把手教你搭建前端单元测试

注意：若使用 : true，需在 .json 中添加 类型定义：

{
  "": {
    "types": ["/"]
  }
}

三、编写第一个测试（实战入门）

3.1 测试一个纯函数

假设我们有一个工具函数 add，位于 src/utils/math.ts：

  add(a: , b: ):  {
   a + b;
}

创建测试文件 src/utils/math.test.ts：

 { , it,  } from '';
 { add } from './math';
('math 工具函数测试', () => {
  it('add 函数应正确计算两个数字的和', () => {
    (add(1, 2)).toBe(3);
    (add(-1, 1)).toBe(0);
    (add(0.1, 0.2)).(0.3); // 浮点数比较用 
  });
});

运行测试：

npm run test

你将看到测试通过的输出。

3.2 测试 Vue 组件（以 Vue 3 + API 为例）

安装测试辅助库：

npm  -D @vue/test-utils @/-vue jsdom

测试一个简单的计数器组件 .vue：

<>
  <div>
    <p>Count: {{ count }}</p>
    < @click=""></>
  </div>
</>
< setup lang="ts">
 { ref } from 'vue';
const count = ref(0);
const  = () => count.value++;
</>

创建测试文件 src//.test.ts：

 { , it,  } from '';
 { mount } from '@vue/test-utils';
  from './.vue';
(' 组件', () => {
  it('点击按钮后计数应增加', async () => {
    const  = mount();
    // 初始渲染值为 0
    (.text()).('Count: 0');
    // 查找按钮并点击
    const  = .find('');
    await .('click');
    // 点击后值为 1
    (.text()).('Count: 1');
  });
});

关键点：mount 来自 @vue/test-utils， 用于模拟用户事件，由于 Vue 的响应式更新是异步的，需要使用 await。

3.3 测试 React 组件

安装测试辅助库：

npm  -D @-/react @-/jest-dom jsdom

测试一个简单的计数器组件 .tsx：

 {  } from 'react';
   () {
  const [count, ] = (0);
   (
    <div>
      <p>Count: {count}</p>
      < ={() => (count + 1)}></>
    </div>
  );
}

创建测试文件 src//.test.tsx：

 { , it,  } from '';
 { ,  } from '@-/react';
  from '@-/user-event';
  from './';
(' 组件', () => {
  it('点击按钮后计数应增加', async () => {
    (< />);
    // 获取元素
    const  = .('');
    const  = .(/Count: /);
    ().('Count: 0');
    // 模拟点击
    await .click();
    ().('Count: 1');
  });
});

四、核心测试能力详解

4.1 匹配器（）

内置了丰富的匹配器，兼容 Jest 的 API。

4.2 异步测试

对于返回 的异步函数，可以使用 async/await 或 /。

示例：异步函数

async  () {
   { id: 1 };
}
it(' 应返回正确数据', async () => {
  const data = await ();
  (data).({ id: 1 });
});
// 或者使用 
it(' 应返回正确数据（方式）', () => {
   (())..({ id: 1 });
});

4.3 Mock（模拟）

提供了强大的 Mock 功能，用于隔离依赖。

Mock 函数：

 { vi } from '';
const  = vi.fn();
(1, 2);
().(1, 2);

Mock 模块：

假设有一个 api.ts 模块：

 const  = async (id: ) => {
  // 真实 HTTP 请求
};

在测试中 Mock 它：

 { vi, , it,  } from '';
 {  } from './api';
vi.mock('./api', () => ({
  : vi.fn(),
}));
it('测试使用  的函数', async () => {
  ( as any).({ name: 'John' });
  // 执行被测试函数...
});

Mock 全局对象：

// Mock .
.(, '', {
  value: { href: '; },
  : true,
});

4.4 生命周期钩子

示例：

 { , , , it,  } from '';
('数据库操作测试', () => {
  (() => {
    // 初始化测试数据
  });
  (() => {
    // 清理测试数据
  });
  it('应该成功插入数据', () => {
    // 测试代码
  });
});

五、代码覆盖率配置与解读

5.1 运行覆盖率测试

npm run test:

运行后，终端会输出覆盖率摘要，同时在项目根目录生成 文件夹，内含 HTML 报告（/index.html）。

5.2 覆盖率指标解读

% Stmts（语句覆盖率）：代码中至少执行过一次的语句比例。

% （分支覆盖率）：控制结构（if、等）中每个分支被执行的比例。

% Funcs（函数覆盖率）：被调用过的函数比例。

% Lines（行覆盖率）：被覆盖的代码行比例。

5.3 设置覆盖率门槛

在 ..ts 中可配置最低阈值，当覆盖率不达标时测试失败：

  ({
  test: {
    : {
      : {
        : 80,
        : 80,
        : 80,
        lines: 80,
      },
    },
  },
});

六、集成到 CI/CD 流程

6.1 示例

创建 .//test.yml：

name: Run Tests
on:
  push:
    : [main, ]
  :
    : [main]
jobs:
  test:
    runs-on: -
    steps:
uses: /@v4
uses: /setup-node@v4
        with:
          node-: '20'
          cache: 'npm'
run: npm ci
run: npm run test:
name:   
        uses: /-@v4
        with:
          token: ${{ . }}

6.2 本地 Git Hooks（使用 Husky + lint-）

在提交前自动运行相关测试：

npx husky add .husky/pre- "npx lint-"

在 .json 中配置：