使用 Vitest 进行 React Testing Library 的测试
首先
以下是使用 Vitest 和 React Testing Library(RTL)的步骤备忘录。
假设
開發環境如下所示。
-
- Windows11
-
- VSCode
-
- TypeScript 4.9.5
-
- React 18.2.0
-
- Vite 4.1.0
-
- Vitest 0.28.5
- @testing-library/react 14.0.0
另外,我們提前做了以下準備。
-
- 使用 Vite 创建项目文件(以下为步骤,请参考本文)。
安装 Vitest。
安装 @testing-library/react。
创建测试目录(src/__test__)。
创建 App.tsx 的测试文件(以下)。
import { render, screen } from "@testing-library/react";
import React from "react";
import { describe, test } from "vitest";
import App from "../../App";
describe("App", () => {
test("renders App component", () => {
render(<App />);
screen.debug();
});
});
![image.png](https://cdn.silicloud.com/blog-img/blog/img/657d323537434c4406c61452/8-0.png)
1. 安装jsdom工具
需要使用类似jsdom的库来在Vitest上使用HTML,RTL用于测试React组件。请使用以下命令安装jsdom。
yarn add --dev jsdom
2. 增加 vite.config.ts 的配置①
接下来,在vite.config.ts文件中添加test的配置。
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true,
},
test: {
environment: "jsdom",
},
});
![image.png](https://cdn.silicloud.com/blog-img/blog/img/657d323537434c4406c61452/15-0.png)
如果在配置Vitest时从vitest中导入defineeConfig,需要在设置文件的开头使用三斜杠命令添加对Vitest类型的引用。然而,尽管我按照这个说明进行了配置,但错误并未解决,所以我按照Stack Overflow上的方法来避免错误。
import react from "@vitejs/plugin-react";
import type { UserConfig } from "vite";
import { defineConfig } from "vite";
import type { InlineConfig } from "vitest";
interface VitestConfigExport extends UserConfig {
test: InlineConfig;
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true,
},
test: {
environment: "jsdom",
},
} as VitestConfigExport);
3. 安装 @testing-library/jest-dom。
为了使RTL可以使用jest-dom,需要使用以下命令安装@testing-library/jest-dom。
yarn add --dev @testing-library/jest-dom
4. 添加测试设置文件
在用于测试文件的目录下添加一个名为 setup.ts 的文件。其内容如下:
import matchers from "@testing-library/jest-dom/matchers";
import { cleanup } from "@testing-library/react";
import { afterEach, expect } from "vitest";
// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);
// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
cleanup();
});
5. 添加追加配置项到vite.config.ts文件。
最终,我们将在 vite.config.ts 文件中导入之前创建的测试配置文件。
此外,为了能够在全局范围内使用 Vitest 的 API ,我们将 globals 设置为 true。
import react from "@vitejs/plugin-react";
import type { UserConfig } from "vite";
import { defineConfig } from "vite";
import type { InlineConfig } from "vitest";
interface VitestConfigExport extends UserConfig {
test: InlineConfig;
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true,
},
test: {
globals: true,
environment: "jsdom",
setupFiles: "./src/__tests__/setup.ts",
},
} as VitestConfigExport);
通过添加 globals: true,可以从测试文件中剔除 import { describe, test } from “vitest”;
App.test.tsx
import { render, screen } from “@testing-library/react”;
import React from “react”;
import { describe, test } from “vitest”;
import App from “../../App”;
描述(“App”, () => {
测试(“渲染 App 组件”, () => {
渲染();
screen.debug();
});
});
另外,根据Vitest的文档,我在tsconfig.json的types字段中添加了vitest/globals。
![image.png](https://cdn.silicloud.com/blog-img/blog/img/657d323537434c4406c61452/29-0.png)
请以参考为依据。
-
- Configuring Vitest
-
- jsdom
-
- React Testing Library
-
- Testing Library
-
- Vite
-
- Vitest
-
- Vitest with React Testing Library
- @testing-library/jest-dom