Enzyme 与 React Router 结合使用的最佳实践

Enzyme 是 React 生态系统中非常受欢迎的测试工具之一，而 React Router 则是构建现代 Web 应用程序中必不可少的路由工具。如何将这两个工具结合使用是前端开发中的一个重要问题。

在本文中，我将介绍 Enzyme 和 React Router 最佳实践，并提供示例代码以帮助您更好地了解如何使用这两个工具。

Enzyme 是一个 React 测试工具库，它可以模拟组件的生命周期和交互，可以方便地测试 React 组件。React Router 则是一个用于处理应用程序路由的库，它允许开发人员在应用程序中实现多个视图，并根据 URL 进行导航。

在将 Enzyme 和 React Router 结合使用时，需要注意以下几点最佳实践：

1. 使用 <MemoryRouter> 替代 <BrowserRouter> 或 <HashRouter>

在测试 React Router 时，如果使用 <BrowserRouter> 或 <HashRouter>，那么测试时会导致 URL 的地址栏发生变化。这会导致测试变得非常复杂，因为您需要模拟不同的 URL。因此，将 <MemoryRouter> 用于测试是一个更好的选择，它可以在内存中管理路由状态。

示例代码：

// www.javascriptcn.com code example
import { MemoryRouter } from 'react-router-dom';

describe('when the user clicks on the link', () => {
  it('should navigate to the target page', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={[ '/page1' ]}>
        <App />
      </MemoryRouter>
    );
    // ...
  });
});

1. 使用 mount() 而不是 shallow()

在测试 React Router 组件时，如果使用 shallow()，那么测试时仅测试单个组件，并不模拟整个应用状态。因此，使用 mount() 可以更好地模拟整个应用程序的状态，包括路由状态。

示例代码：

// www.javascriptcn.com code example
import { MemoryRouter } from 'react-router-dom';

describe('The App component', () => {
  test('renders the correct page based on the route', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/']}>
        <App />
      </MemoryRouter>
    );
    expect(wrapper.find(HomePage)).toHaveLength(1);

    wrapper.find('[data-test="link-to-about"]').simulate('click', { button: 0 });
    expect(wrapper.find(AboutPage)).toHaveLength(1);
  });
});

1. 在测试之前添加路由配置

在进行 React Router 测试之前，应先配置路由。这可以确保 Enzyme 使用正确的路由配置加载组件。如果没有配置路由，那么测试会失败或者会得到不正确的结果。

示例代码：

// www.javascriptcn.com code example
import { Route } from 'react-router-dom';

const MyComponent = () => (
  <div>
    <h1>MyComponent</h1>
  </div>
);

const routes = [
  { path: '/', component: MyComponent, exact: true },
];

test('renders my component', () => {
  const wrapper = mount(<MemoryRouter initialEntries={['/']}><App /></MemoryRouter>);
  expect(wrapper.find(MyComponent)).toHaveLength(1);
});

1. 使用 <Switch> 组件

在测试 React Router 时，应使用 <Switch> 组件，因为它确保了路由匹配仅在找到正确的路由时进行。否则，将仅显示第一个匹配的路由。

示例代码：

// www.javascriptcn.com code example
import { MemoryRouter, Route, Switch } from 'react-router-dom';

test('matches the correct route', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <Switch>
        <Route path="/" exact><HomePage /></Route>
        <Route path="/about"><AboutPage /></Route>
      </Switch>
    </MemoryRouter>
  );
  expect(wrapper.find(HomePage)).toHaveLength(1);
});

通过遵循这些 Enzyme 和 React Router 的最佳实践，您可以更轻松地测试您的 React 应用程序。希望本文对于您的学习和使用有所帮助。

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