随着 React 技术的广泛应用，React 组件的测试也愈发成为前端开发中的不可缺少的一部分。在这里，我们将使用 Jest 来测试 React 组件。
Jest 简介
Jest 是 Facebook 开源的一款基于 jasmine 的 JavaScript 测试框架。它提供了一个友好的 API 来编写单元测试、集成测试以及快照测试等相关测试内容。Jest 还集成了代码覆盖率和并行执行等功能。
在 React 组件中使用 Jest
在你准备开始 React 组件测试之前，需要配置一些相关测试环境和依赖项。我们需要安装 Jest，Enzyme 和一些其他必要的模块来测试 React 组件。
下面是安装 Jest 的命令：
npm install jest jest-dom @testing-library/react --save-dev
配置 Jest
在项目根目录下创建一个名为 jest.config.js 的文件，并添加以下内容：
module.exports = {
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};编写测试用例
在创建组件的同时，我们也需要创建组件的测试用例。下面是一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------------------
------ ---------- ---- -------------------------------
----- --- - -- -- -
------ -
----- ----------
----- ---- --------
----------- ------------------- -------------------
-------
-------
--
--
------ ------- ----为了测试这个组件，我们需要编写一个测试文件 app.test.js。该文件需要在 __tests__ 文件夹下，或包含 .test.js 或 .spec.js 后缀名的文件夹中。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ --- ---- ----------- ------------- ----- ------- -- -- - ----- - --------- - - ----------- ---- ----- ----------- - ----------------- --------- ---------------------------------------- ---
这个测试用例通过 render() 函数来渲染组件并获取 DOM 元素。然后使用 getByText() 函数来获取页面中匹配的文本元素。最后使用 expect() 函数断言文本元素是否存在。
运行测试
现在可以在控制台中通过运行以下命令来运行测试：
npx jest
当测试完成后，你将会在控制台中看到测试结果。
Jest 的更多用法
Jest 还提供了其他功能和用法：
异步测试
Jest 支持异步测试，其中包括回调函数、Promise、async/await 等方式。下面是一个异步测试的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ------------------------- - ---- ------------------------- ------ ----- ---- -------- ------ --- ---- ----------- ------------------- ------------- --- -------- ------ ----- -- -- - ----- ---- - - ----- ------- ------- -- ---------------------------------- ----- - ---------- ----------- - - ----------- ---- --------------------------------------------------- ----- ---------------------------- -- ------------------------ ------------------------------------------------- ---
快照测试
Jest 提供了快照测试功能，可以在每次调用测试时保存组件的渲染结果。这对于检查 UI 变化非常有用。下面是一个快照测试的例子：
import React from 'react';
import renderer from 'react-test-renderer';
import App from './../App';
test('renders app', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot();
});这个测试用例将 App 组件渲染成一个 JSON 树，并将其与之前保存的快照进行比较。如果两者不符，则会测试失败。
测试覆盖率
Jest 也支持测试覆盖率，可以帮助你检查测试是否覆盖了项目中的所有代码。运行以下命令，你将会在控制台中看到测试覆盖率报告。
npx jest --coverage
结论
Jest 是一个灵活且功能强大的测试框架，可用于测试 React 组件。Jest 的语法简单易懂，使开发者能够快速编写测试用例，并提供了丰富的测试功能和用法来检查代码质量和可靠性。这为开发者提供了一个有效的工具来确保他们的代码符合标准，同时避免在部署之前发现错误的尴尬情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67022b2ad91dce0dc846a69b