彼らは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);
});
});
私の設定:
initialEntries
とinitialIndex
を指定する必要があります。あなたの場合は次のようになります:
const wrapper = shallow(
<MemoryRouter initialEntries={['/']} initialIndex={0}>
<App/>
</MemoryRouter>
);
その他の可能性として、enzyme
ではなくmount
のshallow
が必要な場合があります。
react-router
には、いくつかの優れたドキュメントがあります: https://reacttraining.com/react-router/core/api/MemoryRouter