web-dev-qa-db-ja.com

Jestを使用して、react-router v4からリンクをテストする

jestを使用して、react-router v4の<Link>を使用してコンポーネントをテストしています。

<Link />が反応ルーター<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`.
react-routerjestjsreact-router-v4
24
Don P

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

反応ルーターをご覧ください テストに関するドキュメント

27
Andreas Köberle

私は同じ問題を抱えていたので、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();
  });
});
23
Mahdi