react-router - 使用 Jest 测试来自 react-router v4 的链接

Question

我正在使用 jest使用 <Link> 测试组件从 react 路由器 v4。

我收到一条警告:<Link />需要来自 react 路由器的上下文 <Router />零件。

如何在测试中模拟或提供路由器上下文？ (基本上我该如何解决这个警告？)

链接.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

我有同样的问题并使用 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();
  });
});