unit-testing - 用 enzyme react 测试，无法读取未定义的属性 'route'

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' });
});

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