Testing reagieren-Router v4 mit Jest und Enzym

Question

Ich habe eine einfache Anwendung, sie reagieren-Router verwenden 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> 
); 

und Test

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

Warum dieser Test fällt?

Meine config:

• Enzym: 2.8.2
• reagieren-Skripte: 1.0.7
• reagieren Test-Renderer: 15.5.4

Answer 1

Sie haben initialEntries sowie initialIndex bereitzustellen. In Ihrem Fall sollte es so aussehen:

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

Andere Möglichkeit ist, dass Sie enzyme ‚s mount statt shallow müssen.

react-router hat einige großartige Dokumentation hier: https://reacttraining.com/react-router/core/api/MemoryRouter