浅谈 Enzyme 高效测试 React 组件的技巧

Enzyme 是一个 React 组件测试工具，它能够帮助我们快速、准确地测试 React 组件。它的核心思想是“轻量级、灵活性强、API 简单易用”。下面我们来详细介绍一下 Enzyme 高效测试 React 组件的技巧。

为什么需要测试？

在开发任何一个项目时，无论大小，都需要进行测试。测试的目的是为了确保代码的质量，增加代码的稳定性和可维护性。尤其是在前端领域，由于用户操作的复杂性，我们需要经常性地进行组件测试，以防止用户在操作过程中出现异常情况。

Enzyme 的基本使用

在使用 Enzyme 进行 React 组件测试之前，我们需要先安装 Enzyme 包，它包含三个部分：

• enzyme：Enzyme 的核心包，提供了 React 组件的测试方法；
• enzyme-adapter-react-16：适配器，与 React 16 版本兼容；
• react-test-renderer：用于渲染 React 组件。

下面我们来看一个示例：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MyComponent from './MyComponent';

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

describe('My Component', () => {
   let wrapper;
   beforeEach(() => {
       wrapper = shallow(<MyComponent />);
   });

   it('renders a div', () => {
       expect(wrapper.find('div')).toHaveLength(1);
   });
});

上述代码中，我们使用 configure 方法来初始化 Enzyme，然后使用 shallow 方法来渲染 MyComponent 组件，并断言它渲染出来的 div 元素的数量是否为 1。

推荐的测试方法

• shallow：渲染一个仅仅只包含当前组件的测试组件（当前组件根据需要可以传入 props），不包括子组件，调用后，这个组件的生命周期方法并没有被执行；
• render：将 react 组件渲染成字符串，然后可以使用 jQuery 选择器等工具查询元素，调用 render 方法会返回一个 cheerio 树，它与 jQuery 对象相似；
• mount：渲染一个组件及其所有子组件，调用后，这个组件的生命周期方法全部执行。

测试 Redux 集成的组件

如果我们需要测试集成了 Redux 状态管理的组件，我们需要引入第三方库 redux-mock-store，其作用是模拟 Redux Store。

下面我们来看一个使用 redux-mock-store 的测试示例：

// javascriptcn.com 代码示例
import React from 'react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MyComponent from './MyComponent';

const mockStore = configureMockStore([thunk]);
Enzyme.configure({ adapter: new Adapter() });
const store = mockStore({
  loading: false,
  data: {},
  error: '',
});

describe('<MyComponent />', () => {
  it('renders the component', () => {
    const wrapper = shallow(
      <Provider store={store}>
        <MyComponent />
      </Provider>
    );
    expect(wrapper).toMatchSnapshot();
  });
});

上述代码中，我们定义了一个 mockStore 来模拟 Redux Store，然后使用 Provider 组件包裹 MyComponent，使其与模拟的 Store 关联。最后，我们断言渲染出来的组件是否与预期一致。

总结

通过上述使用 Enzyme 进行 React 组件测试的技巧和示例代码，我们可以总结出以下几点：

• Enzyme 是 React 组件测试工具；
• Enzyme 的核心思想是“轻量级、灵活性强、API 简单易用”；
• Enzyme 内置了 shallow、render 和 mount 三种测试方法；
• 如需要测试集成了 Redux 状态管理的组件，我们需要引入第三方库 redux-mock-store。

最后，我们需要注意的是，在进行 React 组件测试时，我们需要根据实际情况灵活选用适当的测试方法，测试出尽可能多的异常情况，以提高代码的稳定性和可维护性。

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