用酶反应测试，无法读取未定义的属性“路线”

Question

在我的 React 应用程序（无通量/redux）中，我正在尝试使用 enzyme 对组件进行单元测试，浅渲染效果很好，我能够检索它的状态等等，但是mount rendering给我一个cannot read property 'route' of undefined的错误。

我的App.js 看起来像这样

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <MyCustomLayout>
            <Route path="/mypath" component={myComponent} />
          </MyCustomLayout>
        </Switch>
      </BrowserRouter>
    )
  }

这是myComponent的代码

import React, { Component } from 'react';
import './index.css';
import { getList } from './apiService.js';
 
class myComponent extends Component {
  constructor(props) {
      super(props);
      this.state = {
        myList: [],
      };
  }
  
  componentDidMount() {
  // get list ajax call
    getList().then(response => {
      this.setState({
        myList: response.data
      })
    });
  }
  
  handleClick = () => {
    this.props.history.push('/home');
  }
  
  renderMyList() {
    /*
      Code for rendering list of items from myList state
    */
  }
  
  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <button onClick={this.handleClick}>Click me</button>
        {this.renderMyList()}
      </div>
    )
  }
}

export default myComponent

这是我的测试代码

import React from 'react';
import myComponent from './myComponent';
import renderer from 'react-test-renderer';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';

test('Initial state of myList should be empty array ', () => {
  const component = shallow(<myComponent/>);
  expect(component.state().myList).toEqual([]);
});

test('Make sure the componentDidMount being called after mount', () => {
  sinon.spy(myComponent.prototype, 'componentDidMount');
  const component = mount(<myComponent/>);
  expect(myComponent.prototype.componentDidMount.calledOnce).toEqual(true);
});

错误是什么？

Answer 1

前几天在这里遇到了这个问题 - 您收到此错误的原因是因为您尝试安装 <Route /> 或 <Link /> 或使用 withRouter() 包裹的组件，而没有 <Router />围绕代码。这些组件期望存在特定的上下文（<Router /> 提供），因此为了测试这些组件，您必须将组件安装在 <MemoryRouter /> 内。

这是为您执行此操作的函数：

const mountWithRouter = Component => mount(
  <MemoryRouter>
    {Component}
  </MemoryRouter>
);

这是你如何使用它的：

test('Make sure the componentDidMount being called after mount', () => {
  sinon.spy(myComponent.prototype, 'componentDidMount');
  const component = mountWithRouter(<myComponent/>);
  expect(myComponent.prototype.componentDidMount.calledOnce).toEqual(true);
});

话虽如此，当我迁移到react-router@^4.0.0 时，我最终试图删除大部分已安装的测试代码——这很麻烦。这样做的主要缺点是您在此测试中的const component 不再是myComponent，而是MemoryRouter。这意味着您不能那么容易地深入了解它的状态等。

编辑：

当我确实需要检查我“必须”安装的组件的状态时，我所做的一个示例是，我改为浅渲染它，然后手动运行我需要的生命周期方法，如下所示：

test('populates state on componentDidMount', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.instance().componentDidMount();
  expect(wrapper.state()).toBe({ some: 'state' });
});

这样，我根本不需要处理路由器问题（因为没有挂载），我仍然可以测试我需要测试的内容。