在 React 中，useState 是一种非常常用的 React Hook，它们用于在函数式组件中管理内部状态。但是在测试组件时，测试这些组件的状态可能变得棘手并且具有挑战性。这是因为我们需要模拟这些组件的状态，并确保测试这些状态的值，从而检查组件是否按预期工作。在此过程中，Enzyme 是一种流行的 JavaScript 测试工具，它能够测试 React 组件并对其进行模拟。 本文将介绍如何在 Enzyme 测试中模拟 useState。
为什么需要模拟 useState？
在测试 React 组件时，我们通常希望编写一些针对组件行为的测试。为了测试组件的行为，我们需要检查组件的状态以及它在不同状态下呈现的输出。但是在测试组件时，我们通常不能依赖真实的生产环境，因此我们需要模拟组件的状态以确保测试的有效性。
理论上，您可以通过手动操作组件的状态来在测试中测试其功能。但是，这是一项具有挑战性的任务，并且可能会变得吃力，尤其是在测试更复杂的组件和状态时。 幸运的是，React 为我们提供了 useState Hook，其有助于管理和维护组件中的状态。 但是，我们需要确保 useState 在测试中也能正常运行。
简单来说，在 Enzyme 测试中使用类似于组件中的 useState 状态具有许多挑战，因为我们需要确保针对状态的更改正常工作，并在测试中反映出这些更改。幸运的是，Enzyme 提供了 setState() 方法，该方法用于模拟 React 的状态设置机制。该 setState() 方法是针对组件中的状态属性而编写的，并模拟了 useState。
以下是模拟 useState 的步骤：
- 首先，导入
useState和shallow()方法：
import { useState } from 'react';
import { shallow } from 'enzyme';- 接下来，模拟和模拟 useState。您可以使用
jest.fn()来模拟useState方法。
const mockSetState = jest.fn(); const mockUseState = (initialState) => [initialState, mockSetState]; jest.spyOn(React, 'useState').mockImplementation(mockUseState);
- 然后，我们可以创建一个 React 组件并包含 ‘useState’ ，如下例所示：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ---------------- - -- -- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - --------- ------------
------
--
--- 然后，我们可以在测试中使用 Enzyme 的
shallow()方法来测试组件：
-- -------------------- ---- -------
---------------------------- -- -- -
---------- --------- ----- -- ------ ------- -- -- -
----- ------- - ------------------------- ----
-- ---- --- ------ ----- --------
-----------------------------------------
-- ------ ---- ----- ----- -- -------
---------------------------------------------
---
---在这里，我们首先使用 shallow() 方法渲染了 ExampleComponent 组件。然后，我们模拟了按钮的点击事件，并使用预计的计数值检查状态是否已更新。
以上是使用 Enzyme 测试中模拟 useState 的步骤。这样，您就可以模拟 React 组件中的状态并确保测试的有效性。
总结
在 React 组件生命周期中，State 是一种很重要的属性，我们需要确保其在测试中也可以正常运行。通过使用 Enzyme 和 mock() 方法，我们可以在テスト中测试 State 来检查是否按预期工作。这样，我们可以确保应用程序的质量和功能，并最大程度地减少错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fad7abf6b2d6eab31a3a06