使用 Vite + TypeScript + Vitest 搭建 React 项目

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这是一个快速的循序渐进教程，旨在指导您完成项目设置。虽然我力求提供详细的解释，但您也可以跳过某些步骤，直接按照每个步骤操作；您仍然可以获得想要的结果。

使用 Vite 设置 React 项目

1. npm create vite <project-title>
2. 选择React-> TypeScript。
3. 运行npm install并npm run dev启动本地开发服务器。

设置 Vitest

Vitest 测试运行器针对 Vite 项目进行了优化。

1. npm install -D vitest

2. npm install -D @testing-library/react @testing-library/jest-dom jsdom
   第一个包@testing-library/react用于组件测试，第二个包@testing-library/jest-dom用于 DOM 断言，最后一个包jsdom用于在 Node 中模拟浏览器环境以进行测试。

3. 更新vite.config.ts 文件，使其包含测试配置
   

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
  },
});

我们做出的更改：

• 在文件开头添加了类型定义
• globals: true这意味着全局变量在诸如“describe”、“it”、“expect”之类的测试中可用，因此我们不必在每个测试文件中都导入它们。
• 指定“jsdom”作为测试环境，模拟浏览器环境
• 定义了“setupFiles”文件，用于在运行测试之前执行必要的代码。这为创建setupTests.ts文件提供了一个完美的过渡。

创建 setupTests.ts 文件

1. 在src目录中创建setupTests.ts 文件。
2. 将此内容粘贴到setupTests.ts 文件中。

import * as matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

expect.extend(matchers);

在这里，我们将 Jest 的 DOM 匹配器引入 Vite，使熟悉 Jest 的用户能够更轻松地进行测试。

1. 添加"test": "vitest"到package.json 文件中

这将允许您使用以下命令运行测试npm test。
接下来，我们开始第一个测试！

编写我们的第一个测试

1. 让我们在src文件夹中创建一个名为App.test.tsx的新文件。
2. 以下是帮助你入门的测试：

import { screen, render } from "@testing-library/react";
import App from "./App";

describe("App tests", () => {
  it("should render the title", () => {
    render(<App />);

    expect(
      screen.getByRole("heading", {
        level: 1,
      })
    ).toHaveTextContent("Vite + React");
  });
});

等等！全是红色的！

测试会通过，我们只需要告诉 TypeScript 为 Vitest 全局变量和 Jest DOM 匹配器添加类型定义。

1. 在"types": ["vitest/globals", "@testing-library/jest-dom"],tsconfig.json中添加。compilerOptions

瞧！如果您喜欢这些内容，请考虑支持我的创作。您的慷慨解囊将激励我创作更多您喜爱的内容！🩷

我是 János，我撰写关于软件、编程和技术的文章。
欢迎查看我的作品集。💾