React 是一个基于组件化的前端框架，能够将程序拆分成多个独立组件，使程序更易于编写、维护和测试。Jest 是一个流行的 JavaScript 测试框架，能够帮助我们测试 React 组件。在测试 React 组件时，我们有时需要 mock 其子组件，以便更好地测试父组件逻辑。本文介绍如何使用 Jest 测试 React 组件，并演示如何 mock 子组件。
安装 Jest
首先，我们需要安装 Jest。可以使用 npm 安装：
npm install --save-dev jest
或者使用 yarn 安装：
yarn add --dev jest
编写测试用例
假设我们有一个简单的 React 组件 Parent，它渲染一个子组件 Child，并在子组件上设置了一个属性 name：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
-------- -------- -
------ -
-----
------ ---------- --
------
--
-
------ ------- -------我们希望测试 Parent 组件是否正确渲染 Child 组件，并传递了正确的属性 name。
为了测试 Parent 组件，我们可以编写以下测试用例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ------ ---- ----------- ------------- ----- --------- ---- ------- ------ -- -- - ----- - ----------- - - -------------- ---- ----- ----- - --------------------- ---------------------------------- ------------------------------------- ------- ---
在测试用例中，我们使用 render 函数渲染 Parent 组件，并使用 getByTestId 函数获取子组件 Child，然后使用 toHaveAttribute 函数检查 Child 是否包含属性 name，并且是否设置为 "Bob"。
但是，这个测试用例是不完整的，因为它依赖于真正的子组件 Child，它并不是一个真正的单元测试。如果我们在 Parent 中使用的是第三方组件，或组件与服务端通信，这个测试用例就无法工作。
为了更好地测试 Parent 组件，我们需要 mock 子组件 Child。
Mock 子组件
在测试 React 组件时，我们可以使用 Jest 的 jest.mock 函数来 mock 子组件。jest.mock 函数接受一个模块名，这个模块名应该是要被 mock 的子组件。我们可以使用 jest.mock 函数来创建一个虚假的 Child 组件，供我们测试 Parent 组件时使用。
假设我们要 mock 的 Child 组件长这样：
import React from 'react';
function Child() {
return <div data-testid="child">Mocked Child</div>;
}
export default Child;我们可以使用 jest.mock 函数来 mock 这个 Child 组件：
jest.mock('./Child', () => {
return function MockedChild() {
return <div data-testid="child">Mocked Child</div>;
};
});在这个 mock 中，我们将 Child 组件替换为一个新的、仅供测试使用的组件 MockedChild。我们可以在这个组件中进行任何逻辑操作，甚至可以添加属性和样式来测试 Parent 组件的各个场景。
修改测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ ------ ---- -----------
-------------------- -- -- -
------ -------- ------------- -
------ ---- -------------------------- ------------
--
---
------------- ----- --------- ---- ------- ------ -- -- -
----- - ----------- - - -------------- ----
----- ----- - ---------------------
----------------------------------
-- ---- ---- ----- ---- --------- ----------- ---
-------------------------------------- --------
---在这个测试用例里，我们 mock 了 Child 组件，并使用 getByTestId 函数获取子组件 Child，然后使用 expect 函数判断子组件是否被渲染出来，并且使用 textContent 函数来判断子组件中的文本内容是否正确。
结论
在本文中，我们学习了如何使用 Jest 测试 React 组件，并演示了如何 mock 子组件。当测试 React 组件时，我们应该尽可能地将其拆分成小组件进行测试，通过 mock 子组件能够让测试变得更方便、更准确，也能更好地测试父组件逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f50fd6c5c563ced56b7659