Używanie jest do testowania łącza z routera reagowania v4

Question

Używam jest do testowania komponentu z <Link> z routera reagującego v4.

Otrzymuję ostrzeżenie, że <Link /> wymaga kontekstu z komponentu reagującego routera <Router />.

Jak mogę sfingować lub podać kontekst routera w moim teście? (W zasadzie jak mogę rozwiązać to ostrzeżenie?)

Link.test.js

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import { Link } from 'react-router-dom'; 

test('Link matches snapshot',() => { 
    const component = renderer.create(
    <Link to="#" /> 
); 

    let tree = component.toJSON(); 
    expect(tree).toMatchSnapshot(); 
}); 

ostrzeżenie, gdy badanie przeprowadzane jest:

Warning: Failed context type: The context `router` is marked 
as required in `Link`, but its value is `undefined`. 

Answer 1

Można owinąć komponent w teście z StaticRouter, aby uzyskać kontekst routera do komponentu:

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import { Link } from 'react-router-dom'; 
import { StaticRouter } from 'react-router' 

test('Link matches snapshot',() => { 
    const component = renderer.create(
    <StaticRouter location="someLocation" context={context}> 
     <Link to="#" /> 
    </StaticRouter> 
); 

    let tree = component.toJSON(); 
    expect(tree).toMatchSnapshot(); 
}); 

Prosze spojrzeć na reakcję Rutera docs about testing

Answer 2

miałem ten sam problem i korzystania StaticRouter nadal wymagają context który potrzebuje więcej konfigurację mieć ona dostępna w moim teście, więc skończyło się używając MemoryRouter który pracował bardzo dobrze i bez żadnych problemów.

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import { MemoryRouter } from 'react-router-dom'; 

// SampleComponent imports Link internally 
import SampleComponent from '../SampleComponent'; 

describe('SampleComponent',() => { 
    test('should render',() => { 
    const component = renderer 
     .create(
     <MemoryRouter> 
      <SampleComponent /> 
     </MemoryRouter> 
    ) 
     .toJSON(); 

    expect(component).toMatchSnapshot(); 
    }); 
});