Sử dụng jest để kiểm tra một liên kết từ phản ứng-router v4

Question

Tôi đang sử dụng jest để thử nghiệm một thành phần với một <Link> từ phản ứng-router v4.

Tôi nhận được cảnh báo rằng <Link /> yêu cầu bối cảnh từ bộ phận phản ứng-router <Router />.

Làm cách nào để thử hoặc cung cấp ngữ cảnh bộ định tuyến trong thử nghiệm của tôi? (Về cơ bản làm thế nào để giải quyết cảnh báo này?)

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

Cảnh báo khi thử nghiệm được chạy:

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

Answer 1

Bạn có thể quấn thành phần của bạn trong các thử nghiệm với StaticRouter để có được bối cảnh router vào thành phần của bạn:

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

Có một cái nhìn tại các phản ứng Router docs about testing

Answer 2

tôi đã cùng một vấn đề và sử dụng StaticRouter vẫn sẽ yêu cầu các context mà cần cấu hình nhiều hơn để có nó có sẵn trong thử nghiệm của tôi, vì vậy tôi đã kết thúc bằng cách sử dụng MemoryRouter mà làm việc rất tốt và không có bất kỳ vấn đề.

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