Enzyme 中如何进行 React 组件的单元测试
React 是近年来出现的一种非常流行的前端框架，它可以让我们通过组件化的方式来开发应用程序。开发一个 React 组件的过程中需要考虑到许多因素，比如组件的状态，渲染效果，事件处理等等。在这种情况下，单元测试就显得非常重要了。Enzyme 是一个适用于 React 组件的测试工具，它为我们提供了很多便利的 API 来进行组件的测试。
Enzyme 主要提供三种测试方式：shallow、mount 和 render。shallow 只测试组件本身，而 mount 则可以测试组件本身以及其子组件，而如果需要渲染成静态 HTML，可以使用 render 方法。
- Shallow 测试
Shallow 测试指的是测试组件本身，而不包括其子组件。在使用 shallow 方式测试前，我们需要先安装 enzyme 和 react-test-renderer：
npm install enzyme react-test-renderer
接下来，我们就可以编写一个简单的测试代码了：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---------- ------- - --- ---- ----- -------- -- -- -
----- ------- - -------------------- ----
---------------------------- ---------------- ------------------
---
---------- ------ --- ---- ------ --------- -- -- -
----- ------- - -------------------- ----
-------------------------------------------------- ---------
---上面的代码中，我们通过 import 引入了 React 和 shallow 方法，然后定义了一个测试用例。在第一个测试用例中，我们使用匹配器来测试组件的渲染效果，也就是快照测试。第二个测试用例中，我们测试组件包含一个 div 元素，同时这个元素具有 "test" 这个 class 属性。第三个测试用例中，我们测试组件渲染出的文本内容是否符合预期。
- Mount 测试
相对于 Shallow 测试，Mount 测试包括测试组件本身和子组件。在这种情况下，我们需要在测试代码中添加一个 React 的测试渲染器：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ - ------ - ---- ----------------------
------ ----------- ---- ----------------
---------- ------ ----------- -- -- -
----- ---- - ------------------- ----
-------------------------------
---
---------- ------- - --- ---- ----- -------- -- -- -
----- ------- - ------------------ ----
---------------------------- ---------------- ------------------
---
---------- ------ --- ---- ------ --------- -- -- -
----- ------- - ------------------ ----
-------------------------------------------------- ---------
---与 Shallow 测试不同的是，我们需要使用 mount 方法来代替 shallow 方法。此外，我们也需要使用 create 方法来创建组件树，然后使用匹配器来进行测试。
- Render 测试
有时候，我们需要测试组件渲染出来的 HTML 代码。在这种情况下，我们可以使用 Render 测试方式：
import { render } from 'enzyme';
import MyComponent from './MyComponent';
it('should contain a div with class "test"', () => {
const wrapper = render(<MyComponent />);
expect(wrapper.find('.test').length).toEqual(1);
});我们可以看到，在上面的测试代码中，我们只需要使用 render 方法来渲染组件。此后，我们可以通过查询结果来测试组件的渲染结果。值得注意的是，与 mount 方法不同，render 将渲染结果渲染成 HTML 字符串，这意味着我们不能够使用组件的实例来执行测试。
总结
在本篇文章中，我们介绍了如何使用 Enzyme 进行 React 组件的单元测试。我们通过分别使用 shallow、mount 和 render 三种测试方式来完成不同的测试，并通过示例代码来详细说明这些测试方式的使用方法。对于使用 React 进行开发的前端开发者，这些测试方法非常值得掌握，它们可以帮助我们提高代码的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ce2ae48841e9894b31331