Question

在我的React应用程序（无助焊剂/还原剂）中，我尝试使用enzyme对组件进行单元测试，浅层渲染效果很好，我能够要检索它的状态等，但装载渲染会给我一个错误cannot read property 'route' of undefined。

我的App.js看起来像这样

＆＃13;

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

＆＃13;

以下是myComponent

的代码

＆＃13;

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

＆＃13;

以下是我的测试代码

＆＃13;

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

＆＃13;

错误是什么？

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

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

用酶进行反应测试，无法读取属性＆＃39; route＆＃39;未定义的

1 个答案: