如何在 Vite-React TypeScript 项目中安装 Jest 进行测试？分步指南。

语法错误：不能在模块外部使用 import 语句

介绍

应用程序测试是 Web 开发的重要组成部分。它有助于在应用程序正式发布给用户之前消除 bug。应用程序测试还有助于维护和重构代码，尤其是在协作项目中，开发人员可能会进行一些与上下文无关的更改，从而促进团队成员之间的良好协作。此外，它还能确保代码的质量和正确性。
本文旨在展示如何使用 Jest 在 React-Vite 应用程序中进行单元测试，从设置到实现。

笑话

要了解更多关于 Jest 测试框架的信息，请访问Jest 网站。

先决条件

首先，我们需要以下物品：

• 电脑和文本编辑器。（开玩笑啦，我们当然已经有了。）
• 已安装 npm 或 yarn

我们将首先使用 Vite 创建一个 React 应用，然后设置 Jest 进行测试，并对 React 组件进行一些测试。

用例

步骤 1：使用 Vite 创建 React 应用

在文本编辑器中打开终端（本项目将使用 VSCode），然后使用以下命令创建 React 应用： 按照向导操作并选择所需的选项。
npm create vite@latest


从以上内容可以看出，我们选择了 React 和 Typescript，并将项目命名为“mini-app-testing”，因此我们将使用 Typescript 进行构建。

• 现在运行以下命令，即可开始并逐步安装所需的软件包。

cd mini-app-testing- 导航到项目目录。

npm install- 安装软件包。（您也可以使用 yarn，但我们最初使用的是 npm，所以我们继续使用它。）

npm run dev- 启动项目。

如果你正确完成了上述步骤，
你的 VSCode 中应该会出现类似这样的内容。

在您的浏览器上

步骤 2：设置 Jest

在深入探讨具体步骤之前，请注意 Vite 对 Jest 有一些限制，这使得在 Vite 应用程序中配置 Jest 看起来有点复杂。
请按照以下步骤开始操作。

• npm install jest --save-dev
• npm install @testing-library/react --save-dev
• npm install ts-jest @types/jest --save-dev
• 在 package.json 文件中，"test": jest向脚本中添加以下内容

// package.json

{
  "name": "mini-app-testing",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "test": "jest"
  },

• 运行npm run test后，您会收到一条消息，提示未找到测试，如下所示。

• 为了解决上述问题，我们在src文件夹中创建一个名为 __ tests __ 的文件夹，并添加测试文件：src/__ tests __/App.spec.tsx。

• 在测试文件 App.test.tsx 中添加一个简单的测试。

 typescript
// src/__ tests __/App.test.tsx

test('demo', () => {
  expect(true).toBe(true)
})

• 再运行一次npm run test。瞧！我们的第一次测试通过了。

步骤 3：测试组件

• 为了测试组件，我们将 App.tsx 导入到 App.test.tsx 中，并对 App 组件运行一个简单的真值测试。

// src/__ tests __/App.test.tsx

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

test('demo', () => {
    expect(true).toBe(true)
})

test("Renders the main page", () => {
    render(<App />)
    expect(true).toBeTruthy()
})

• 让我们再测试一下，运行一下npm run test。但是它会因为缺少依赖项和配置而失败，如下所示。因此，必须对其进行配置，使其能够导入和读取导入的组件。

• 跑步npm install ts-node @testing-library/jest-dom --save-dev
• 跑步npm install jest-environment-jsdom

• 跑步npm install identity-obj-proxy --save-dev

• 在根目录下创建一个名为 jest.config.ts 的文件，并将以下内容添加到该文件中。

// jest.config.ts

export default {
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
    transform: {
        "^.+\\.tsx?$": "ts-jest" 
    // process `*.tsx` files with `ts-jest`
    },
    moduleNameMapper: {
        '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__ mocks __/fileMock.js',
    },
}

• 在 src 文件夹中，创建一个名为 test 的文件夹，然后在 test 文件夹中创建一个名为 __mocks__ 的文件夹，并添加一个名为 fileMock.js 的文件：src/test/__mocks__/fileMock.js，并添加以下内容：

// src/test/__ mocks __/fileMock.js

module.exports = {
    __esModule: true,
    default: 'test-file-stub',
};

• 在 App.test.tsx 中，导入 @testing-library/jest-dom

// src/__ tests __/App.test.tsx

import '@testing-library/jest-dom'
import { render } from "@testing-library/react"
import App from "../App"

test('demo', () => {
    expect(true).toBe(true)
})

test("Renders the main page", () => {
    render(<App />)
    expect(true).toBeTruthy()
})

• 然后运行该npm run test命令检查所有问题是否都已解决。

您可以继续进行测试流程。祝您测试顺利！😀

结论

总而言之，在 React Vite 应用中集成 Jest 并安装必要的 Jest 包是一个简单易行的过程。只需遵循一系列简单的步骤，开发者即可将 Jest 无缝集成到项目中，并充分利用其强大的测试功能。成功集成 Jest 后，开发者便可自信地创建测试，从而确保 React Vite 应用的质量和准确性。