NPM 包 enzyme-context-react-router-3 使用教程

在现代 Web 开发中，前端框架的使用已经变得非常普遍，而 React 作为其中的佼佼者，已经成为了很多开发者的首选框架之一。在 React 开发中，测试是一个非常重要的部分，而 Enzyme 是一个优秀的 React 测试工具。Enzyme 的 API 设计简单易用，并且与 React 生态系统完美结合。本文将介绍如何使用 npm 包 enzyme-context-react-router-3，结合 Enzyme 在 React 项目中进行路由层的测试。

安装

使用 npm 安装依赖包:

npm i -D enzyme enzyme-context-react-router-3

示例

考虑一个基本的 React SPA，包含两个页面：Home 和 About。使用 react-router-3 进行路由控制。相关代码如下：

import React from 'react';
import { Router, Route, browserHistory } from 'react-router-3';

import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router history={browserHistory}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

这是一个非常典型的 React Router 应用。如果您对 React Router 还不熟悉，可以先去官网学习一下。复杂的路由配置，React Router 比较强大并且灵活。

接下来，我们来编写测试代码。首先，需要安装 enzyme-context-react-router-3 第三方包。

npm i -D enzyme-context-react-router-3

然后编写测试用例:

import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { createMemoryHistory } from 'react-router-3';
import { mountWithContext, configureContext } from 'enzyme-context-react-router-3';

import App from './App';
import Home from './pages/Home';
import About from './pages/About';

// 启用 enzyme-adapter-react-16
Enzyme.configure({ adapter: new Adapter() });

describe('App', () => {
  it('renders Home page for / route', () => {
    const history = createMemoryHistory('/');

    const wrapper = mountWithContext({ children: <App />, history });
    expect(wrapper.find(Home)).toHaveLength(1);
  });

  it('renders About page for /about route', () => {
    const history = createMemoryHistory('/about');

    const wrapper = mountWithContext({ children: <App />, history });
    expect(wrapper.find(About)).toHaveLength(1);
  });
});

上述代码包含两个测试用例: renders Home page for / route 和 renders About page for /about route。这两个用例分别测试了访问首页和关于页的情形。

函数 createMemoryHistory 创建了一个带有初始 pathname 的 history，并将其传递到了 mountWithContext 函数中，这些函数都来自于enzyme-context-react-router-3。history 对象是路由操作的基础，可在测试中模拟应用程序的路由行为。

mountWithContext 函数是一个被封装过的 Enzyme.mount，它支持传递一个history对象作为参数，从而模拟测试用例在路由上的行为。同时，函数 configureContext 同样包含了一堆常用常量和方法的封装，让测试用例能够快速取得想要的结果。

这些函数的返回值，是一个包含路由信息的、完整的react节点。测试用例就可以通过 .find 方法取得其中的组件，并在其结果集中断言是否包含了预期组件。

结语

本文介绍了如何利用 enzyme-context-react-router-3 进行 React 的路由层测试，并通过调用 createMemoryHistory 函数和 mountWithContext 函数，以及 configureContext 封装的一些常用方法，使测试用例得以奏效。希望本文能够对想要使用 Enzyme 进行 React 路由层测试的开发者有所帮助。

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