如何使用 Enzyme 测试 React Router 相关组件-JavaScript中文网-JavaScript教程资源分享门户

React Router 是 React 中一个非常流行的库，用于实现应用程序路由功能。但是，在编写测试时，特别是针对涉及路由的组件时，你可能会遇到一些挑战。幸运的是，有一个叫做 Enzyme 的测试工具可以帮助我们轻松地解决这个问题。

安装 Enzyme

首先，我们需要安装 Enzyme。如果你已经在项目中使用了 Jest，则可以通过以下命令来安装 Enzyme：

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

接下来，我们需要一些额外的配置才能使 Enzyme 正常工作。

在项目根目录创建一个 setupTests.js 文件，并添加以下代码：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

这个文件将告诉 Jest 使用 Enzyme 来测试 React 组件。

测试 React Router 组件

现在我们已经安装好了 Enzyme，让我们来看看如何测试一个使用 React Router 的组件。假设我们有一个 NavBar 组件，它包含一些链接，这些链接将导航到其他页面。我们想要测试这些链接是否导航到了正确的路由路径。

// NavBar.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
};

export default NavBar;

首先，我们需要编写一个测试用例来确保这个组件正确渲染了链接。我们可以使用 Enzyme 的 shallow 方法来渲染这个组件，并在测试用例中检查是否存在 Link 元素。

// NavBar.test.jsx

import React from 'react';
import { shallow } from 'enzyme';
import NavBar from '../NavBar';

describe('NavBar component', () => {
  it('should render links', () => {
    const wrapper = shallow(<NavBar />);
    expect(wrapper.find('Link')).toHaveLength(3);
  });
});

接下来让我们编写一个测试用例来验证这些链接是否能够正确导航到相应的路由路径。为此，我们需要附加一个内存路由器（MemoryRouter）并模拟用户导航到特定的路径。然后，我们可以通过 wrapper.find() 这个方法获取包含目标页面内容的元素，并断言它们是否正确地显示了所需的页面。

// NavBar.test.jsx

import React from 'react';
import { shallow, mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import Home from '../Home';
import About from '../About';
import Contact from '../Contact';
import NavBar from '../NavBar';

describe('NavBar component', () => {
  it('should render links', () => {
    const wrapper = shallow(<NavBar />);
    expect(wrapper.find('Link')).toHaveLength(3);
  });

  it('should navigate to Home page', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/']}>
        <NavBar />
      </MemoryRouter>
    );
    expect(wrapper.find(Home)).toHaveLength(1);
  });

  it('should navigate to About page', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/about']}>
        <NavBar />
      </MemoryRouter>
    );
    expect(wrapper.find(About)).toHaveLength(1);
  });

  it('should navigate to Contact page', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/contact']}>
        <NavBar />
      </MemoryRouter>
    );
    expect(wrapper.find(Contact)).toHaveLength(1);
  });
});

总结

测试 React Router 相关组件对于保证代码质量至关重要，Enzyme 提供了一种简单的方法来实现相关测试。

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