Enzyme 中使用 Jest 的 Snapshot 测试 React 组件的正确方式
在 React 开发中，我们经常需要测试组件的正确性。其中一种测试方式是快照测试（Snapshot Testing），在 Jest 中有着很好的支持。而 Enzyme 是一个流行的 React 测试工具，可以方便地进行组件测试。本文将介绍如何在 Enzyme 中使用 Jest 的快照测试来测试 React 组件的正确性。
- 安装 Jest 和 Enzyme
首先需要安装 Jest 和 Enzyme。可以使用 npm 或 yarn 进行安装：
--- ------- ---------- ---- ------ -----------------------
或者
---- --- ----- ---- ------ -----------------------
其中 enzyme-adapter-react-16 是 Enzyme 适配器的 React 16 版本。
- 配置 Enzyme
在使用 Enzyme 之前，需要配置 Enzyme 适配器。在项目的根目录下创建一个 setupTests.js 文件，然后将以下代码添加到文件中：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这样就配置好了 Enzyme，可以开始写测试了。
- 编写测试用例
以一个简单的 Button 组件为例，来编写测试用例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
----------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - --------------- ----
----------------------------------
---
---这里使用了 Jest 的 describe 和 it 函数，分别表示测试组件的描述和测试用例的描述。shallow 函数是 Enzyme 中的一个函数，它可以将组件渲染为一个浅层次的组件树，方便进行测试。
在测试用例中，使用 expect 函数和 toMatchSnapshot 函数进行快照测试。toMatchSnapshot 函数将会创建一个快照文件，如果测试用例的输出与快照文件不一致，测试将会失败。
- 运行测试
在 package.json 文件中添加测试命令：
---------- - ------- ------ -
然后运行 npm run test 或 yarn test 命令，将会运行测试用例。如果测试通过，将会在项目根目录下生成一个 snapshots 文件夹，其中包含了所有的快照文件。
- 更新快照
如果组件的输出发生了变化，需要更新快照文件。可以使用 --updateSnapshot 参数来更新快照文件：
--- --- ---- -- --
或者
---- ---- -- --
- 总结
本文介绍了在 Enzyme 中使用 Jest 的快照测试来测试 React 组件的正确性。使用快照测试可以方便地测试组件的输出是否正确，并且可以快速地发现组件的变化。希望本文对于 React 开发者能够有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656c238fd2f5e1655d48a43e