Enzyme 如何模拟 React 组件中的导航、路由等跳转操作

在 React 开发中，导航、路由等跳转操作是非常常见的场景。然而，在编写测试用例时，我们很难模拟这些操作。这时候，Enzyme 就能派上用场了。

Enzyme 是一个 React 测试工具库，它提供了一套简洁、灵活的 API，可以方便地模拟组件的行为，并对其进行测试。

Enzyme 的基本使用

在使用 Enzyme 进行测试之前，我们需要先安装它。可以使用 npm 或者 yarn 进行安装：

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

或者

yarn add --dev enzyme enzyme-adapter-react-16

Enzyme 提供了三个渲染器（Renderers）：

• shallow：浅渲染器，只渲染当前组件，不渲染子组件。
• mount：完整渲染器，渲染当前组件及其子组件。
• render：静态渲染器，将组件渲染成静态 HTML，用于测试组件的渲染结果。

我们可以根据需要选择不同的渲染器。下面以 shallow 渲染器为例，介绍 Enzyme 的基本使用。

import React from 'react';
import { shallow } from 'enzyme';

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

上面的代码中，我们使用 shallow 渲染器创建了一个组件实例，并对其进行了快照测试。toMatchSnapshot() 方法会将组件渲染结果与预期结果进行比较，如果一致，则测试通过。

模拟导航操作

在 React 中，导航操作通常是通过路由组件实现的。因此，要模拟导航操作，我们需要先安装一个路由库，比如 react-router-dom：

npm install --save react-router-dom

或者

yarn add react-router-dom

在组件中使用路由组件时，通常会使用 Link 组件进行跳转。如果要测试这个跳转操作，我们可以使用 simulate 方法模拟点击事件。

import React from 'react';
import { shallow } from 'enzyme';
import { BrowserRouter as Router, Link } from 'react-router-dom';

describe('MyComponent', () => {
  it('should navigate to /about when the link is clicked', () => {
    const wrapper = shallow(
      <Router>
        <MyComponent />
      </Router>
    );
    const link = wrapper.find(Link);
    link.simulate('click', { button: 0 });
    expect(window.location.pathname).toEqual('/about');
  });
});

上面的代码中，我们首先使用 shallow 渲染器创建了一个包含 MyComponent 的 Router 实例。然后，我们使用 find 方法找到 Link 组件，并使用 simulate 方法模拟点击事件。最后，我们断言当前页面的路径是否为 /about。

模拟路由操作

除了使用 Link 组件进行跳转之外，我们还可以使用 history 对象进行路由操作。history 对象是 React Router 提供的一个 API，可以用于管理路由历史记录。

import React from 'react';
import { shallow } from 'enzyme';
import { createMemoryHistory } from 'history';

describe('MyComponent', () => {
  it('should navigate to /about when the button is clicked', () => {
    const history = createMemoryHistory();
    const wrapper = shallow(<MyComponent history={history} />);
    const button = wrapper.find('button');
    button.simulate('click');
    expect(history.location.pathname).toEqual('/about');
  });
});

上面的代码中，我们首先使用 createMemoryHistory 方法创建一个内存历史记录对象。然后，我们使用 shallow 渲染器创建一个包含 MyComponent 组件的实例，并将 history 对象作为属性传递给组件。最后，我们使用 find 方法找到按钮，并使用 simulate 方法模拟点击事件。最终，我们断言当前页面的路径是否为 /about。

总结

Enzyme 是一个非常有用的 React 测试工具，它提供了一套简洁、灵活的 API，可以方便地模拟组件的行为，并对其进行测试。在测试导航、路由等跳转操作时，我们可以使用 simulate 方法模拟用户的操作，从而进行测试。希望这篇文章能够对你有所帮助！

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