使用Jest从react-router v4测试链接

Question

我正在使用来自react-router v4 jest的组件进行测试<Link>.

我收到一个警告,<Link />需要来自react-router <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

您可以使用StaticRouter将组件包装在测试中,以将路由器上下文放入组件中:

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

看看有关测试的react路由器文档

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