Enzyme 测试 React 组件时如何使用 “wrapper” 属性进行快照测试

在前端开发中，测试是非常重要的一环。而在 React 组件的测试中，Enzyme 是一个非常流行的测试库。在 Enzyme 中，我们可以使用 wrapper 属性进行快照测试，即对组件的渲染结果进行截图，并将其与预期结果进行比较，以验证组件的正确性。

Enzyme 简介

Enzyme 是 React 的一个测试库，由 Airbnb 开发和维护。它提供了一系列 API，可以方便地对 React 组件进行测试，包括渲染组件、查找组件、模拟事件等操作。Enzyme 支持三种渲染方式：浅渲染（shallow）、完全渲染（mount）和静态渲染（render）。其中，浅渲染只渲染组件的一层，不渲染子组件；完全渲染会渲染整个组件树，包括子组件；静态渲染则将组件渲染成静态 HTML 字符串，不包含任何交互逻辑。

快照测试简介

快照测试是一种测试方法，它可以对组件的渲染结果进行截图，并将其与预期结果进行比较。如果两者一致，则测试通过；否则，测试失败。快照测试通常用于 UI 组件的测试，可以有效地避免由于样式变化等原因导致的错误。

使用 wrapper 进行快照测试

在 Enzyme 中，我们可以使用 wrapper 属性进行快照测试。wrapper 是一个包装器，可以将组件渲染成一个虚拟 DOM，然后提供一系列 API，可以对虚拟 DOM 进行查询、操作和断言。在快照测试中，我们可以使用 wrapper 的 html 方法将虚拟 DOM 转换成 HTML 字符串，并将其与预期结果进行比较。

下面是一个简单的示例，演示如何使用 wrapper 进行快照测试：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';

import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.html()).toMatchSnapshot();
  });
});

在这个示例中，我们首先导入 shallow 方法和待测试的组件 MyComponent。然后，在测试用例中，我们使用 shallow 方法将 MyComponent 渲染成一个虚拟 DOM，并将其包装成一个 wrapper 对象。最后，我们使用 expect 和 toMatchSnapshot 方法对 wrapper.html() 的结果进行断言。toMatchSnapshot 方法会将当前测试用例的快照保存到一个文件中，下次运行测试时，会将当前的快照和之前保存的快照进行比较，如果两者一致，则测试通过。

总结

Enzyme 是 React 的一个流行的测试库，可以方便地对组件进行测试。在 Enzyme 中，我们可以使用 wrapper 属性进行快照测试，即对组件的渲染结果进行截图，并将其与预期结果进行比较。快照测试是一种简单而有效的测试方法，可以有效地避免由于样式变化等原因导致的错误。希望本文对大家在前端开发中使用 Enzyme 进行测试有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657e59e3d2f5e1655d92f084