web-dev-qa-db-ja.com

JestとEnzymeを使用したreact-router v4のテスト

彼らはreact-router v4を使用するシンプルなアプリを持っています

const App = () => (
  <Switch>
    <Route exact path="/" component={() => <div>Home</div>}/>
    <Route path="/profile" component={() => <div>Profile</div>}/>
    <Route path="/help" component={() => <div>Help</div>}/>
  </Switch>
);

そしてテスト

jest.dontMock('../App');

import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { shallow } from 'enzyme';

import App from '../App';

describe('<App />', () => {
  const wrapper = shallow(
    <MemoryRouter>
      <App/>
    </MemoryRouter>
  );

  console.log(wrapper.html());

  it('renders a static text', () => {
    expect(
      wrapper.contains(<div>Home</div>)
    ).toBe(true);
  });
});

なぜこのテストは落ちるのですか？ enter image description here

私の設定：

  • 酵素：2.8.2
  • 反応スクリプト：1.0.7
  • react-test-renderer：15.5.4
javascriptreactjsjestjsenzymereact-router-v4
11
Pavel

initialEntriesとinitialIndexを指定する必要があります。あなたの場合は次のようになります：

const wrapper = shallow(
  <MemoryRouter initialEntries={['/']} initialIndex={0}>
    <App/>
  </MemoryRouter>
);

その他の可能性として、enzymeではなくmountのshallowが必要な場合があります。

react-routerには、いくつかの優れたドキュメントがあります： https://reacttraining.com/react-router/core/api/MemoryRouter

9
Tomasz Cichociński