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

我正在使用 jest 来测试带有来自 react-router v4 的 <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`.

最佳答案

您可以使用 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 路由器 docs about testing

关于react-router - 使用 Jest 测试来自 react-router v4 的链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46255840/