基于vite创建的react18项目的单元测试

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

最近一个小伙伴进了字节外包，第一个活就是让他写一个单元测试。

嗯，说实话，在今天之前我只知道一些理论，但是并没有实操过，于是我就试验了一下。

通过查询资料，大拿们基本都说基于vite的项目，用vitest进行测试比较方便一些。

闲话不多说，步入正题。

01 下载依赖

在vscode终端输入以下命令：

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom

--save-dev: 

这个标志表示将这些包添加为开发依赖（devDependencies）。这些依赖只在开发环境中使用，而不会被包含在生产环境中。

例如，测试框架和工具通常只在开发时需要，而不需要在生产环境中。

vitest:

这是一个快速的单元测试框架，类似于 Jest，但专为 Vite 生态系统设计。

它支持现代 JavaScript 特性，并且与 Vite 无缝集成，非常适合用于测试 Vite 创建的项目。

@testing-library/react:

这是一个用于测试 React 组件的库，提供了一组 API，使得编写测试变得简单而直观。

它鼓励以用户的方式来测试组件，而不是实现细节，从而提高测试的可靠性和可维护性。

@testing-library/jest-dom: 

这是一个为 Jest 提供的自定义匹配器库，增强了 Jest 的断言功能，使得你可以使用更自然的语法来进行 DOM 相关的断言。

例如，你可以使用 

toBeInTheDocument() 来检查某个元素是否在文档中，而不需要写复杂的查询逻辑。

02 创建testSetup.js文件

文件里只有一行代码：

import '@testing-library/jest-dom';

03 配置vite.config.js文件