Enzyme Test：为什么我更喜欢使用浅层 Shallow Rendering
前言
在前端开发中，测试是不可或缺的一部分。而在 React 中，Enzyme 是一个非常流行的测试工具，它提供了一种简单而强大的方式来测试 React 组件。在使用 Enzyme 进行测试时，我们可以选择使用浅层 Shallow Rendering 或深层 Full DOM Rendering。然而，我更喜欢使用浅层 Shallow Rendering，下面我将详细讲解原因。
什么是 Shallow Rendering
Shallow Rendering 是一种测试 React 组件的方式，它只渲染当前组件，而不渲染其子组件。这种方式非常快，因为它不需要渲染整个组件树，只需要渲染当前组件即可。在测试中，我们通常只需要测试当前组件的行为和状态，因此 Shallow Rendering 是一种非常有效的测试方法。
Shallow Rendering 的优势
- 快速
Shallow Rendering 只渲染当前组件，因此速度非常快。这对于大型项目来说非常重要，因为测试的速度直接影响开发的效率。使用 Shallow Rendering 可以在不牺牲测试质量的情况下提高测试速度。
- 简单
Shallow Rendering 是一种非常简单的测试方式。它只需要渲染当前组件并断言其行为和状态即可。这使得测试代码非常容易编写和维护。
- 专注
Shallow Rendering 只测试当前组件，因此可以专注于测试当前组件的行为和状态。这使得测试更加集中和有针对性，而不是测试整个组件树。
- 稳定
Shallow Rendering 只测试当前组件，因此不会受到子组件的影响。这使得测试更加稳定，因为子组件的变化不会影响当前组件的测试结果。
示例代码
下面是一个使用 Enzyme 进行浅层 Shallow Rendering 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---------- ------ ----- ----------- -- -- -
----- ------- - -------------------- ----
------------------ ------ - ---
------------------------------------------
---
---------- ---- ----------- ----------- -- -- -
----- ------- - -------------------- ----
----- ------ - ----------
------------------------------ - -------
---------------------------------
-----------------------------------------
----------------------------------
---
---上面的代码中，我们使用了 Enzyme 的 shallow 函数来渲染 MyComponent 组件。然后，我们编写了三个测试用例：
渲染正确：使用 expect(wrapper).toMatchSnapshot() 来测试组件是否正确渲染。
状态更新：使用 wrapper.setState() 来更新组件的状态，然后使用 expect(wrapper.state('count')).toEqual(1) 来测试状态是否正确更新。
点击事件：使用 jest.fn() 创建一个模拟函数，然后使用 wrapper.instance().handleClick = mockFn; 来模拟点击事件，最后使用 expect(mockFn).toHaveBeenCalled() 来测试点击事件是否被正确调用。
结论
在 React 测试中，Shallow Rendering 是一种非常有效和优秀的测试方式。它可以提高测试速度、简化测试代码、专注于当前组件、保持测试稳定性。因此，我更喜欢使用浅层 Shallow Rendering 来测试 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675797cc5f8d9c663c9fe971