新手也能看懂的前端单元测试框架：Vitest

单元测试的概念及作用


1.什么是单元测试？

单元测试是测试中的一个重要环节，它针对软件中的最小可测试单元举行验证，通常是指对代码中的单个函数、方法或模块举行测试。
单元测试旨在确定特定部分代码的活动是否符合预期，通过针对单元代码的各种输入环境举行测试，来验证代码的正确性、稳固性和可靠性。

2.为什么要做单元测试？

• 2.1 确保代码质量和可靠性：单元测试可以资助开辟人员发现和修复代码中的错误和缺陷。通过编写针对每个单独的函数或组件的测试用例，可以验证其活动是否符合预期，从而增强代码质量和可靠性。
  
• 2.2 提高代码可维护性： 单元测试可以作为文档和说明来资助其他开辟人员了解代码的预期活动。通过编写清晰、有目的性的测试用例，可以资助开辟团队更好地明确和维护代码。
  
• 2.3 快速反馈和迭代： 单元测试使得代码的迭代和快速反馈变得更加容易。通过自动运行测试用例，开辟人员在修改代码后可以快速获得有关是否引入新错误或破坏现有功能的反馈。
  
• 2.4 节省时间和资源： 尽管编写和维护单元测试需要一些额外的工作量，但它可以节省大量的时间和资源。通过快速检测和修复代码中的错误，可以避免在后期发现标题并举行繁琐的调试和修复。
  此外，当代码库变得越来越大和复杂时，拥有一套稳健的单元测试可以节省大量的回归测试时间。
  

3.前端代码单元测试面临的挑衅与标题

• 3.1 难以测试 DOM 操作： 前端开辟中最常见的任务之一就是操作 DOM，但由于浏览器环境的限定，DOM 操作很难通过自动化测试来模拟。这意味着要测试 DOM 操作通常需要手动测试或利用可视化测试工具。
  
• 3.2 异步操作的测试： 在前端开辟中，异步代码执行是比较常见的。但是，异步测试需要在数据返回之前等待一段时间。
  
• 3.3 测试用例覆盖率的管理： 在编写测试用例时，需要考虑完整和准确地覆盖所有代码路径。但是，测试用例的数目和管理可以是一个挑衅，并且可能需要一些额外的工具来资助管理测试用例的覆盖率。
  
• 3.4 特定 DOM 事件和浏览器环境的测试： 在某些环境下，需要通过特定的 DOM 事件和浏览器环境对代码举行测试。这可以通过模拟特定的事件和利用虚拟浏览器环境来完成。
  

前端单元测试工具以及测试规范


1.测试工具

以下是一些流行的前端单元测试工具：

• 1.1 Jest：Jest 是一个 Facebook 公司开辟的流行的 JavaScript 测试框架。它提供了自动化测试、模拟和覆盖率报告等功能。Jest 的主要特点是易于利用、速度快、自动运行测试用例和提供详细报告。
  
• 1.2 Mocha：Mocha 是一个流行的 JavaScript 测试框架，可以用于编写前端和后端测试用例。它提供差别的测试运行器、测试框架、覆盖率报告等工具。Mocha 可以与其他库（如 Chai、Sinon 等）联合利用，以提供更好的测试功能。
  
• 1.3 Enzyme：Enzyme 是一个 React 组件测试工具，它提供了一个简单的 API 来模拟 React 组件的活动。Enzyme 可以资助开辟人员测试组件的渲染和逻辑，以确保其正确性。它还提供了丰富的匹配器和渲染引擎，以举行功能和性能测试。
  

实际项目中测试框架和工具选择：

• 测试基础框架：Vitest ，它是基于vite驱动，如果项目中利用了vite，它是最好的选择
  

• DOM 环境：jsdom、happy-dom
  

React项目：

• @testing-library/react：作为 React DOM 和 UI 组件
  

• @testing-library/jest-dom：用于扩展Vitest的expect方法
  

Vue项目

• vue-router-mock：模拟 Vue 3应用步伐中的路由交互
  
• @vitejs/plugin-vue 是一个 Vite 插件，它可以让 Vite 可以解析 .vue 文件，对于 JSX/TSX 支持，还需要@vitejs/plugin-vue-jsx
  

• @vue/test-utils：Vue 3的组件测试工具
  

2.测试规范

(1) 定名约定it or test?

• 1、it是 BDD（活动驱动开辟）风格中常用的定名约定。它夸大形貌被测试活动的天然语言形貌，以便更好地阐述测试的用例。
  
• 2、test是传统的定名约定，被广泛利用在各种单元测试框架中。它更加直接和简便，通常以测试的目的作为开头，然后形貌被测试的函数或特性。
  

无论利用it还是test作为测试函数的定名约定，最重要的是保持一致性和可读性。根据你的团队或项目的偏好，选择一个恰当的定名约定并始终如一地利用它。
(2) 判断相当toBe or toEqual?

• 1、toBe它利用===查抄严格的同等，通常用于比较基础类型。
  
• 2、toEqual用于查抄两个对象具有雷同的值。这个匹配器递归地查抄所有字段的相当性，而不是查抄对象身份 - 这也被称为“深度同等”。
  

利用toBe举行比较时要注意，它比较的是两个对象的引用，而不是对象的属性是否雷同。
(3) 测试文件写在哪？

• 1、把测试文件同一写在 src/test/，如许保持项目和测试代码分离，保持工程目录整洁。
  
• 2、和组件写在同一级目录，即src/components/下，xx.jsx、xx.test.jsx, 如许对开辟人员友爱，组件与测试一起更方便维护。
  

(4) 测试用例注意事项

• 1、清晰的目的和形貌：测试用例应该具有清晰的目的和形貌，以便于明确和维护。用一个简便但有意义的名称来形貌该测试用例的功能或活动。
  
• 2、单一功能和场景：每个测试用例应该只关注一个功能或一个特定的场景。这有助于准确地定位和修复标题。
  
• 3、确保环境一致性：对于每个测试用例，提供须要的前提条件，确保测试环境的一致性。
  
• 4、测试目的简单、完整：只管把业务代码的函数的功能单一化，简单化。如果一个函数的功能包含了十几个功能数十个功能，那应该对该函数举行拆分，从而更加有利于测试的举行。
  

利用Vitest测试React项目


1.安装相关工具

1. pnpm i -D vitest js-dom @testing-library/react

复制代码

Vitest 1.0 需要 Vite >=v5.0.0 和 Node >=v18.0

2.设置vitest

Vitest 的主要优势之一是它与 Vite 的同一设置。如果存在，vitest 将读取你的根目录 vite.config.ts 以匹配插件并设置为你的 Vite 应用步伐。
如果你已经在利用 Vite，请在 Vite设置中添加 test 属性。你还需要利用 三斜杠指令 在你的设置文件的顶部引用。
vite.config.ts

1. [/code] [list=1]
2. [*] /// <reference types="vitest" />
3. [*] import { defineConfig } from 'vite'
4. [*]
5. [*] export default defineConfig({
6. [*] test: {
7. [*] globals: true,
8. [*] environment: 'jsdom',
9. [*] },
10. [*] })
11. [/list]
12. [list]
13. [*] [b]globals:[/b] 默认环境下，vitest 不显式提供全局 API。如果你更倾向于利用类似 jest 中的全局 API，可以将 --globals 选项传递给 CLI 或在设置中添加 globals: true。
14. [*] [b]environment: [/b]Vitest中的默认测试环境是一个 Node.js 环境。如果你正在构建 Web 端应用步伐，你可以利用 jsdom 或 happy-dom 这种类似浏览器(browser-like)的环境来替代 Node.js。
15. [/list] 可以参阅 设置索引(https://cn.vitest.dev/config/) 中的设置选项列表
17. [b]3.方法测试[/b]
19. 测试独立的工具函数，比方测试斐波那契数列：
20. @param方法接受参数 num
21. @return返回值为斐波那契数列中第 n 个数字fibonacci.ts
22. [code]

复制代码

• export function fibonacci(num: number): number {
  
• if (num <= 1) {
  
• return num;
  
• }
  
• return fibonacci(num - 1) + fibonacci(num - 2);
  
• }
  

fibonacci.test.ts
[code][/code]

• import { describe, it, expect } from 'vitest';
  
• 
  
• import { fibonacci } from '@/utils/fibonacci/fibonacci.ts';
  
• 
  
• describe('fibonacci', () => {
  
• it('should return 0 when num is 0', () => {
  
• expect(fibonacci(0)).toEqual(0);
  
• });
  
• 
  
• it('should return 1 when num is 1', () => {
  
• expect(fibonacci(1)).toEqual(1);
  
• });
  
• 
  
• it('should return 1 when num is 2', () => {
  
• expect(fibonacci(2)).toEqual(1);
  
• });
  
• 
  
• it('should return 2 when num is 3', () => {
  
• expect(fibonacci(3)).toEqual(2);
  
• });
  
• 
  
• it('should return 3 when num is 4', () => {
  
• expect(fibonacci(4)).toEqual(3);
  
• });
  
• });
  

当编写测试用例来测试独立的方法或函数时，应满足以下要求