在 React 组件开发中，我们经常需要进行单元测试来确保代码的正确性以及防止潜在的问题。而 Enzyme 是一款非常流行的 React 组件测试工具。它可以让我们轻松地测试 React 组件的各种行为和状态。
在本文中，我们将探讨 Enzyme 的 Mock 调用。Mock 调用可以让我们模拟 JSON API 或其他依赖项的返回值，从而轻松进行组件测试。
Enzyme 简介
Enzyme 是 Airbnb 开源的一个 React 组件测试工具。它提供了多种 API 来操作 React 组件，使得测试工作变得更加简单和高效。
Enzyme 可以模拟用户交互、验证组件状态、处理数据流以及测试组件的生命周期等。它支持多种测试工具，例如 Jest、Mocha 和 Chai 等。Enzyme 的安装非常简单，我们只需要使用 npm 就可以安装它。
npm install --save-dev enzyme enzyme-adapter-react-16
Mock 调用
在测试组件时，我们经常需要模拟依赖项的返回值。例如，我们可能需要模拟 JSON API 或其他依赖项的结果。这样，我们就可以更好地测试组件的行为和状态，而不会受到外部依赖项的影响。
Mock 调用可以模拟函数的返回值。在 Enzyme 中，我们可以使用 jest.mock() 方法来创建 Mock 调用。
jest.mock("./api", () => ({
getItems: jest.fn(() => Promise.resolve({ data: ["item1", "item2"] }))
}));上面这段代码使用了 jest.fn() 方法来创建一个 Mock 函数，它返回了一个 Promise 对象，其中包含了一个 data 数组。这个 Mock 函数会覆盖指定路径位置上的函数。
在组件测试中，我们可以使用 expect() 方法来验证 Mock 函数是否正确被调用。
it("fetches async items", async () => {
const wrapper = mount(<Items />);
await act(() => Promise.resolve(wrapper));
wrapper.update();
expect(getItems).toHaveBeenCalled();
});上面这段代码测试了 getItems() 函数是否被调用了。我们可以通过使用 toHaveBeenCalled() 方法来确保这个函数被正确调用。
示例代码
下面是一个简单的示例代码，它演示了如何使用 Enzyme 的 Mock 调用来测试一个 TodoList 组件。我们使用 jest.mock() 方法来创建一个 Mock 函数并覆盖 getTodos() 函数。然后，我们可以使用 mount() 方法来渲染组件，并使用 expect() 方法来验证 Mock 函数是否正确被调用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------
------ -------- ---- -------------
------------------ -- -- --
--------- ---------- -- ----------------- ----- --------- -------- ---
----
------------------- ---- -- -- -
------------ -- -
---------------------
---
----------- ----- ------- ----- -- -- -
----- ------- - --------------- ----
----- ------ -- --------------------------
-----------------
------------------------------------
---
---总结
本文介绍了 Enzyme 的 Mock 调用，它可以模拟依赖项的返回值，从而轻松进行组件测试。我们可以使用 jest.mock() 方法来创建 Mock 函数，并使用 expect() 方法来验证 Mock 函数是否正确被调用。
Enzyme 是一个强大的 React 组件测试工具，它可以让我们轻松地测试组件的各种行为和状态。Enzyme 的 Mock 调用是一个非常实用的功能，它可以让我们更好地测试组件，并确保代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517dfa495b1f8cacd007227