प्रतिक्रिया-राउटर v4

Question

से किसी लिंक का परीक्षण करने के लिए जेस्ट का उपयोग करना मैं प्रतिक्रिया-राउटर v4 से <Link> के साथ किसी घटक का परीक्षण करने के लिए jest का उपयोग कर रहा हूं।

मुझे एक चेतावनी मिली है कि <Link /> को प्रतिक्रिया-राउटर <Router /> घटक से संदर्भ की आवश्यकता है।

मैं अपने परीक्षण में राउटर संदर्भ कैसे नकल या प्रदान कर सकता हूं? (मूल रूप से कैसे मैं इस चेतावनी को हल करते हैं?)

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

चेतावनी जब परीक्षण चलाया जाता है:

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

Answer 1

आप अपने घटक लपेट कर सकते हैं अपने घटक में राउटर संदर्भ प्राप्त करने के लिए स्टेटिक राउटर के साथ परीक्षण में:

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

रूटर docs about testing

Answer 2

मैं एक ही मुद्दा है और का उपयोग कर StaticRouter अभी भी context जो अधिक विन्यास की जरूरत यह अपने परीक्षण में उपलब्ध होना आवश्यक होता था प्रतिक्रिया पर एक नज़र डालें, तो मैं MemoryRouter जो बहुत काम किया का उपयोग कर समाप्त हो गया अच्छी तरह से और बिना किसी मुद्दे के।

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