使用 Jest 和 Enzyme 设置用于测试的 React 应用

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

我已经很久没有用 Jest 和 Enzyme 来测试 React 应用了。由于我不得不查阅好几个步骤才能想起该怎么做，所以我决定写个超简明指南，希望能帮到其他人。

12月8日更正

16.14.0Enzyme 目前还不兼容 React 17。如果您想在测试中使用 Enzyme，请确保您使用的 React 版本已达到最新版本。此 PR将添加一个 React 17 的适配器。请不要询问他们何时完成，他们会在完成时发布！

步骤 1：创建应用程序create-react-app

这需要事先npx安装。您可以在这里了解相关信息。

npx create-react-app <app-name>

步骤 2：如果您像我一样使用 Sass 模块，请安装node-sass

截至撰写本文时，node-sass@5.0.0该版本不兼容，node-sass@4.14.1必须安装其他版本。Stack Overflow 上有相关的解答，链接在此。

yarn add node-sass@4.14.1

步骤 3. 安装 Enzyme 的开发依赖项

这个--dev选项会将这些依赖项保存devDependencies到你的package.json文件中。为什么它们需要保存在该文件下呢？因为这类依赖项是“仅用于本地开发和测试的软件包”。你可以在这里devDependencies阅读更多相关信息。

yarn add --dev enzyme enzyme-adapter-react-16

步骤 4. 使用适配器配置 EnzymesetupTests.js

Enzyme 需要知道你想使用哪个适配器。我们在项目目录下的setupTests.js文件中指定了适配器的配置。你可以在这里src找到更多关于 Enzyme 设置的详细信息。

现在你的setupTests.js文本应该只有一些注释和一条语句。只需在其后添加以下几行：importimport

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

第五步：开始测试！💪

所有需要的工具都已安装完毕，现在你只需要编写一些测试用例。以下是一些 Jest 和 Enzyme 的文档，可以帮助你快速入门：

• Jest“入门指南”
• Jest“测试 React 应用”指南
• Enzyme 的“将 Enzyme 与 Jest 结合使用”指南
• 酶 API 参考

你知道我有电子报吗？📬

如果您想在我发布新博客文章或发布重大项目公告时收到通知，请访问https://ashleemboyer.com/newsletter。