Enzyme + Jest 测试 React 组件时如何使用 mockImplementation()
前端开发人员在测试 React 组件时通常使用 Enzyme 和 Jest 这两个工具。其中，Enzyme 提供了对 React 计算机渲染实现的易用封装，而 Jest 则是一个流行的 JavaScript 测试框架。在测试时，开发人员通常会使用 Jest 的 mockImplementation() 方法对组件进行模拟，以确保组件在执行时得到预期的输出。
mockImplementation() 是 Jest 提供的一个方法，可以用来模拟一个函数的实现。它通常被用来测试一个有副作用的函数，例如发起网络请求，或者打印某些信息。在测试中，我们可以使用它来测试 React 组件的行为。
首先，让我们看一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
-------- ------ ----------------------
------- ----------- -- ------------------------- -----------
------
--
-
-
------ ------- ------------这个组件有一个 state 属性 count，并且有一个按钮可以更新这个属性的值。接下来，我们将使用 Jest 和 Enzyme 来测试这个组件的渲染和行为。
首先，我们需要安装 Enzyme 和相应的适配器：
npm install enzyme enzyme-adapter-react-16 --save-dev
接下来，我们需要配置 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });现在，我们可以开始编写测试代码了。在测试中，我们可以使用 shallow() 方法来测试这个组件的渲染和行为：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---------- ------ ----- ---- --- ------ -- --------- -- -- -
----- --------- - -------------------- ----
-------------------------------------------
----- ----- - ------------------------
----------------------
---
---在这个测试中，我们首先使用 shallow() 方法来渲染这个组件。然后，我们使用 toMatchSnapshot() 方法来测试组件是否正确地渲染。接下来，我们测试了当按钮被点击时，组件中的 count 属性是否被正确更新。
现在，假设我们需要对一个组件中的某个函数进行模拟，以确保它得到正确的输入和输出。我们可以将函数模拟成一个 jest.fn() 对象，并使用 mockImplementation() 方法来实现模拟。例如，假设我们需要模拟上面组件中的 handleClick() 函数：
-- -------------------- ---- -------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---------- ------ ----- ---- --- ------ -- --------- -- -- -
----- --------- - -------------------- ----
----- --------------- - ----------
-------------------------------- - ------------------------------------- -- -
-------------------- ------ ----------------------- - - ---
---
-------------------------------------------
-------------------------------------------
----------------------------------------
---
---在这个测试中，我们首先创建了一个 mockHandleClick 函数，并将其模拟为 handleClick 函数的实现。然后，我们使用 instance() 方法来获取组件实例，并将 handleClick 函数替换为 mockHandleClick 函数。接下来，我们模拟了一个按钮的点击事件，并检查了 mockHandleClick 函数是否被正常调用，并且组件的 count 属性是否被正确地更新。
总结：
在测试 React 组件时，使用 Enzyme 和 Jest 非常方便。使用 Jest 的 mockImplementation() 方法可以确保组件的行为得到正确的测试，尤其是针对有副作用的函数。
示例代码：https://github.com/HCP0809/react-test/tree/master/mockImplementation
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482f43348841e9894251ee7