快速掌握 Enzyme：从入门到精通-FunTeaLearn Online Web Tutorials

前言

Enzyme 是 React 生态系统中最常用的测试工具之一。它提供了一系列 API，用于方便地测试 React 组件的行为和渲染输出。Enzyme 支持多种渲染方式，包括浅渲染、完整渲染和静态渲染等。本文将从入门到精通逐步介绍 Enzyme 的使用，帮助读者更好地了解和掌握这个工具。

入门

安装

Enzyme 可以通过 npm 安装：

npm install --save-dev enzyme

另外，需要安装对应的适配器，以便 Enzyme 能够与 React 一起使用。例如，如果你使用的是 React 16，可以安装 enzyme-adapter-react-16：

npm install --save-dev enzyme-adapter-react-16

配置

在使用 Enzyme 之前，需要在测试文件中引入 enzyme 和适配器，并进行配置：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

浅渲染

浅渲染是指只渲染组件本身，而不渲染其子组件。这种方式可以快速测试组件的行为，而不用关心它的子组件是否正确渲染。使用 shallow 方法可以进行浅渲染：

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);

完整渲染

完整渲染是指渲染整个组件树，包括所有子组件。这种方式可以测试组件的完整渲染结果，但是速度相对较慢。使用 mount 方法可以进行完整渲染：

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);

静态渲染

静态渲染是指将组件渲染成静态 HTML 字符串。这种方式可以用于测试组件的输出结果，但是不支持交互操作。使用 render 方法可以进行静态渲染：

import { render } from 'enzyme';

const wrapper = render(<MyComponent />);

查找元素

Enzyme 提供了多种方法查找组件中的元素。其中，find 方法可以根据选择器查找元素：

const wrapper = shallow(<MyComponent />);
const element = wrapper.find('.my-class');

另外，find 方法还可以接受一个函数作为参数，用于进一步筛选元素：

const wrapper = shallow(<MyComponent />);
const element = wrapper.findWhere(node => node.prop('name') === 'John');

模拟事件

Enzyme 允许模拟常见的 DOM 事件，例如点击、输入等。使用 simulate 方法可以模拟事件：

const wrapper = shallow(<MyComponent />);
wrapper.find('.my-button').simulate('click');

断言

Enzyme 支持多种断言库，例如 Jest、Chai 等。使用断言库可以方便地编写测试用例。以下是一个使用 Jest 进行断言的示例：

const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.my-class')).toHaveLength(1);

进阶

快照测试

快照测试是指将组件的渲染结果与预期结果进行比较。如果两者一致，则测试通过。使用 Jest 的 toMatchSnapshot 方法可以进行快照测试：

const wrapper = shallow(<MyComponent />);
expect(wrapper).toMatchSnapshot();

异步测试

在测试异步代码时，需要使用 Jest 提供的 done 参数。以下是一个使用 setTimeout 进行异步测试的示例：

it('should render the component after 1 second', done => {
  const wrapper = shallow(<MyComponent />);
  setTimeout(() => {
    wrapper.update();
    expect(wrapper.find('.my-class')).toHaveLength(1);
    done();
  }, 1000);
});

高阶组件测试

高阶组件是指接受一个组件作为参数，并返回一个新的组件的函数。测试高阶组件时，需要使用 dive 方法进入其子组件：

const wrapper = shallow(<MyHigherOrderComponent><MyComponent /></MyHigherOrderComponent>);
const componentWrapper = wrapper.dive().find(MyComponent);
expect(componentWrapper).toHaveLength(1);

Redux 测试

在测试 Redux 相关的组件时，需要使用 Provider 组件提供 Redux 的 store。以下是一个使用 Provider 进行测试的示例：

-- -------------------- ---- -------
------ - -------- - ---- --------------
------ -------------- ---- -------------------

----- --------- - -------------------
----- ----- - --------------

----- ------- - ------
  --------- --------------
    ------------ --
  -----------
--

--------------------------------------------------

结语

Enzyme 是一个非常强大的测试工具，它可以方便地测试 React 组件的行为和输出结果。本文从入门到精通介绍了 Enzyme 的使用方法，希望读者能够更好地掌握这个工具，提高测试效率和代码质量。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d30abba941bf71345cde32

快速掌握 Enzyme：从入门到精通

前言

入门

安装

配置

浅渲染