使用 initialEntries 测试 react-router (with Enzyme)

Question

我在测试以 initialEntries 值开头的 react-router 时遇到问题 - 以下测试失败，我不确定为什么或做错了什么。

import React, { Component } from 'react';
import { assert } from 'chai';
import { MemoryRouter, BrowserRouter as Router, Route } from 'react-router-dom';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

/* eslint react/prefer-stateless-function: "off" */
class TestApp extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route path="/nothome" render={() => 'AWAY'} />
          <Route path="/" exact render={() => 'HOME'} />
        </div>
      </Router>
    );
  }
}

describe('react-router works with enzyme', () => {
  it('works with enzyme with starting location', () => {
    const wrapper = mount(<MemoryRouter initialEntries={['/nothome']} initialIndex={0}><TestApp /></MemoryRouter>);
    assert.isTrue(wrapper.html().includes('AWAY'), wrapper.html());
  });
});

测试失败并显示以下内容：

● react-router works with enzyme › works with enzyme with starting location

    AssertionError: <div>HOME</div>: expected false to be true

Answer 1

我想我现在明白了...将组件包装在 <MemoryRouter> 中不会覆盖现有的 <Router> 组件。以下测试通过：

import React, { Component } from 'react';
import { assert } from 'chai';
import { MemoryRouter, Route } from 'react-router-dom';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

/* eslint react/prefer-stateless-function: "off" */
class TestApp extends Component {
  render() {
    return (
      <div>
        <Route path="/nothome" render={() => 'AWAY'} />
        <Route path="/" exact render={() => 'HOME'} />
      </div>
    );
  }
}

describe('react-router works with enzyme', () => {
  it('works with enzyme with starting location', () => {
    const wrapper = mount(<MemoryRouter initialEntries={['/nothome']} initialIndex={0}><TestApp /></MemoryRouter>);
    assert.isTrue(wrapper.html().includes('AWAY'), wrapper.html());
  });
});