使用 Vitest 进行 React Testing Library 的测试

8 月 ago

雅, 悟

2 minutes

首先

以下是使用 Vitest 和 React Testing Library（RTL）的步骤备忘录。

假设

開發環境如下所示。

@testing-library/react 14.0.0

另外，我們提前做了以下準備。

安装 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();
  });
});

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",
  },
});

如果在配置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。

请以参考为依据。

@testing-library/jest-dom