使用initialEntries测试react-router（带有Enzyme）

Posted 2021-04-16

我有一个问题测试react-router开始与initialEntries值 - 以下测试失败，我不知道为什么或我做错了什么。

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

答案

我想我现在明白了......在<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());
  });
});