如何使用 Enzyme 进行简单的 React 单元测试
React 是一种流行的 JavaScript 库，它为用户界面构建提供了出色的抽象层。 其中一个非常重要的事情是一些特定任务（例如单元测试）中 - 传统 JavaScript 测试工具通常不适用于测试 React 组件，因为它们无法模拟 DOM 和 React 生命周期。Enzyme 是一个流行的测试实用程序，它允许您模拟 React 组件中的 DOM 层次结构，查询您的组件，并模拟用户操作，以便为您的 React 应用程序编写简单且有针对性的断言，现在我们一起学习如何使用 Enzyme 进行简单的 React 单元测试。
准备工作
首先，您需要确保您的 React 项目支持 Jest 和 Enzyme。您可以运行以下命令为您的项目安装 Jest 和 Enzyme：
npm install --save-dev jest npm install --save-dev enzyme enzyme-adapter-react-16
然后，您需要为 Jest 配置 Enzyme。在您的 package.json 文件中添加以下属性：
"jest": { "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"], "snapshotSerializers": ["enzyme-to-json/serializer"] }
这将告诉 Jest 在测试之前加载所需的 Enzyme 配置，并使用 Enzyme 提供的序列化程序进行快照测试比较。
测试用例
在本文中，我们将编写一个简单的测试用例，测试一个 React 组件是否正确地渲染。我们将测试以下组件：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------------- - ----- - -------- ----- - - ------ ------ - ------- ------------------ ------- --------- -- - ------ ------- -------展开代码
现在我们来编写测试用例:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ------------------ -- -- - ---------- ------ ----------- -- -- - ----- --------- - --------------- ------------ --- ---- ------------------------------------ --- ---------- ------ ----- ------- -- -- - ----- ----------- - ---------- ----- --------- - --------------- ------------ --- --------------------- ---- ------------------------------------------- --------------------------------------- --- ---展开代码
第一行我们导入了所需的依赖。 shallow 是 Enzyme 的一个函数，用于渲染组件而不渲染嵌套的子组件。
测试的第一个部分是快照测试。 shallow 函数返回一个对象，您可以在其中查询渲染的结果。我们使用 jest 的 toMatchSnapshot 来比较此快照对象是否与此前保存的快照匹配。 如果不匹配，将生成新的快照。
在第二个测试用例中，我们还要测试按钮的点击事件。 我们首先创建一个被 mock（假的）的回调函数，然后使用 Enzyme 的 simulate 方法调用按钮的单击事件。 最后，我们使用 toHaveBeenCalled 来检查回调函数是否被调用。
实现这两个测试之后，现在您可以运行测试了，运行以下命令并查看结果 npm run test.
-- -------------------- ---- ------- ---- ------- ---- ------------------ ------ - ------ ------ --------- ----- - ------ ------ ----- ----- ----- ---- ------- - ------- - ----- ------ - ------- - ----- ---------- - ------- - ----- ----- ------- --------- -- --- --- ---- -------展开代码
这样您就可以通过这种方式来利用 Enzyme 进行 React 组件的单元测试，只要遵循正确的实践和标准，这将是一项非常有收获和有价值的工作。
构建一个强大的测试套件来检查您的 React 应用程序中是否出现错误，可以让您的应用程序更可靠且更少出现致命错误。尽管这需要一些额外的工作，但将为您的用户提供无与伦比的优质体验，也将增加您的开发人员信心。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9c6d3e46428fe9e19ac24
