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

我正在使用jest来测试一个带有< Link>的组件.来自react-router v4.

我收到一条警告< 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();
});

看看反应路由器docs about testing

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...