在 React 项目中设置 Jest 和 React 测试库 | 分步指南

2025-06-07

在 React 项目中设置 Jest 和 React 测试库 | 分步指南

不久前，我偶然发现了测试的概念，特别是“编写测试”。我以前总是手动打开浏览器进行测试，但你无法预知代码修改后会出什么问题，而且通常情况下确实会出问题。
关键在于，真正的应用需要测试，以确保我们的功能不会意外中断。与其亲自测试应用，不如编写可以随时运行的测试，以确保一切按预期运行。
在本教程中，我将引导你完成设置 Jest 和 React 测试库 (RTL) 的过程，以测试 React 应用。

注意：这是从零开始搭建 React 环境系列文章的第三篇，因为create-react-appCRA 中已经包含了 Jest 和 React 测试库。在第一篇文章中，我们从零开始创建了一个全新的 React 项目，没有使用create-react-app；第二篇文章中，我们配置了 ESLint、Prettier 和 Husky ；我们将在此基础上搭建 Jest 和 RTL 环境，并编写我们的第一个测试。上一篇文章的代码可以在这里
找到。

先决条件

  • 我假设您有一个正在运行的 React 应用程序以及我们根据以前的文章构建的所有内容，如果您需要将本文用于其他目的，您也可以继续关注，但请注意，您的代码可能看起来与我的不同，但想法应该是相同的。

  • VS 代码：我将使用 VS 代码作为我们的代码编辑器，但您可以随意使用您喜欢的任何代码

这就是你所需要的，让我们开始吧

为什么要测试？
编写测试可能很枯燥，在某些情况下甚至毫无用处，但我再怎么强调全面测试应用程序的重要性也不为过。如何确保应用程序在添加新代码后仍然有效？=> 编写测试后，如何发现从未想过存在的错误？通过编写测试。建议您测试编写的所有内容，以确保应用程序按预期运行。许多组织都非常严格地执行测试，有些组织使用测试驱动开发，即在实现功能之前编写测试。

Jest
Jest 是由 Facebook 创建的开源测试框架，与 React 完美集成。它内置了许多功能，例如快照测试、函数模拟、覆盖率收集，并且通常易于配置和使用。在此配置中，我们将使用 Jest 运行我们编写的测试，并了解哪些测试失败或通过，并收集覆盖率（即告诉我们代码库中哪些代码行未被覆盖/测试）。点击此处了解更多关于 Jest 的信息

React 测试库
React 测试库 (RTL) 是一个轻量级测试库，它通过模拟用户与我们的应用程序交互方式来帮助我们测试 React。正如这里提到的，官方 React 文档建议使用 RTL 来鼓励编写像最终用户一样使用组件的测试。在这里了解有关 RTL 的更多信息

在我们的示例中，我们将同时使用 Jest 和 RTL，但请注意，它们都可以单独使用或与其他工具一起使用。为了更好地进行测试，我们将使用 React 测试库来查找我们的组件并对其进行操作，而 Jest 将确定测试是否通过和失败以及测试覆盖率

本指南将更多地介绍配置，因此我不会介绍太多有关编写测试的内容。有关测试 React 应用程序的详细信息，请查看此处的精彩文章

废话少说，让我们开始派对吧。请按照以下步骤操作

1.安装 React 测试库依赖项

  • 运行以下命令安装 RTL 依赖项（作为开发依赖项）
npm install --save-dev @testing-library/react @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode

如果你喜欢纱线

yarn add --dev @testing-library/react @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode
  • @testing-library/react：安装 React 测试库的核心依赖项。
  • @testing-library/jest-dom：是 Jest 的虚拟 DOM，允许我们使用自定义 Jest 匹配器，并通过 React 测试库扩展 Jest。这些匹配器将使你的测试更具声明性，更易于阅读和维护。稍后会详细介绍。

2. 安装 Jest 依赖项

  • 运行以下命令来安装 jest 依赖项（作为开发依赖项）
npm install --save-dev jest jest-environment-jsdom
Enter fullscreen mode Exit fullscreen mode

如果你喜欢纱线

yarn add --dev jest jest-environment-jsdom
Enter fullscreen mode Exit fullscreen mode
  • jest：Jest 运行所需的核心依赖项
  • jest-environment-jsdom：这将允许我们使用，并且我们将它与我们之前安装的jsdom一起使用@testing-library/jest-dom

3. 配置 Jest
您可以通过在根文件夹中添加 jest 条目package.json或添加名为 jest 的文件来配置 Jest jest.config.js。为了保持package.json简洁，我们将使用jest.config.js

  • 在根文件夹中创建一个名为的文件jest.config.js，并添加以下代码配置。
module.exports = {
    collectCoverage: true,
    collectCoverageFrom: ['src/**/*.{js,jsx}'],
    coverageDirectory: 'coverage',
    testEnvironment: 'jsdom',
}
Enter fullscreen mode Exit fullscreen mode

了解此配置

  • collectCoverage：启用收集覆盖范围
  • collectCoverageFrom指定要从中收集覆盖率的文件，这些文件来自所有文件.js和jsxsrc 文件夹中的文件
  • coverageDirectory指定 jest 将放置覆盖文件的文件夹
  • testEnvironment我们将设置用于测试的测试环境，jsdom该环境将来自我们之前安装的软件包@testing-library/jest-dom。jest-environment-jsdom

Jest 的大部分配置都已默认配置，因此我们无需在此文件中进行太多编辑，但您可以根据需要自定义所有内容。点击此处，详细了解所有配置及其值。

4.将 Jest 与 React 测试库集成

  • 在根文件夹中创建一个名为的文件，jest.setup.js输入以下代码行
import '@testing-library/jest-dom'
Enter fullscreen mode Exit fullscreen mode

@testing-library/jest-dom这意味着我们从包中导入所有内容

  • 在我们之前创建的文件中jest.config.js，添加另一个字段setupFilesAfterEnv并将其值设置为，['<rootDir>/jest.setup.js']这将告诉 jest 对于我们编写的每个测试，它将从jest.setup.jsie 加载配置，使用 React 测试库，你jest.config.js应该看起来像这样
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,jsx}'],
  coverageDirectory: 'coverage',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};
Enter fullscreen mode Exit fullscreen mode

5.将 Jest 与 ESLint
集成 在第二篇文章中，我们设置了 ESLint 来帮助我们清理代码。默认情况下，如果在安装了 Eslint 的情况下使用 Jest，Eslint 会报错，因为在 Jest 测试中，我们直接使用了一些函数而没有导入它们，而 ESLint 不接受这种情况，因此我们需要将 Eslint 与 Jest 集成。

请按照以下步骤操作，如果您的项目中没有 Eslint，则可以跳过此部分

  • 运行以下命令进行安装，eslint-plugin-jest这将使 Eslint 识别 Jest 代码
npm install --save-dev eslint-plugin-jest
Enter fullscreen mode Exit fullscreen mode 
yarn add --dev eslint-plugin-jest
Enter fullscreen mode Exit fullscreen mode
  • 在插件数组中eslintrc.json添加"jest"
  • 在eslintrc.json添加"plugin:jest/recommended",中extends使用推荐的 jest 语法
  • 在条目中eslintrc.json添加env以"jest/globals": true在我们的 eslint 环境中启用 jest

你eslintrc.json最终应该看起来像这样

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest/globals": true
    },
    "extends": [
        "plugin:react/recommended",
        "plugin:jest/recommended",
        "airbnb",
        "prettier"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": ["react", "jest"],
    "rules": {
        "no-underscore-dangle": 0,
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "js": "always",
                "jsx": "always"
            }
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode


6. 在脚本对象中添加测试脚本，package.json添加以下脚本

scripts:{
... //scripts you already have
test: "jest",
coverage: "jest --coverage"
}
Enter fullscreen mode Exit fullscreen mode

test: "jest"：将找到所有通过和失败的测试
coverage: "jest --coverage"：也将运行我们的测试并收集我们的覆盖率

这就是所有配置，现在你可以编写一些测试

编写测试
通过对流我们创建一个名为test或的文件夹，__test__在文件夹中您有要测试的文件，并且测试将具有名称foo.test.js或bar.test.js

  • 在src文件夹中创建一个test文件夹并添加App.test.jsx到测试App.jsx和以下代码
import { render, screen } from '@testing-library/react';
import React from 'react';
import App from '../App.jsx';

describe('App tests', () => {
    it('should contains the heading 1', () => {
    render(<App />);
        const heading = screen.getByText(/Hello world! I am using React/i);
        expect(heading).toBeInTheDocument()
    });
});
Enter fullscreen mode Exit fullscreen mode
  • 通过运行来运行测试npm run test and it should pass

在这个测试中，我们测试的是我们Hello world! I am using React的页面中是否有文本，这应该可以通过，因为这是我们在第 1 篇文章中使用的文本

这就是我们如何设置 Jest 和 React 测试库来测试 React 应用程序

有关本文中提到的代码的参考，请查看此GitHub 存储库

文章来源：https://dev.to/ivadyhabimana/setup-jest-and-react-testing-library-in-a-react-project-a-step-by-step-guide-1mf0
Devto 翻译
PREV
Fast-track to a new language for an experienced programmer
NEXT
学习如何在 React 中偷懒：初学者指南。