web-dev-qa-db-fra.com

Utilisation de Jest pour tester un lien à partir de react-router v4

J'utilise jest pour tester un composant avec un <Link> de react-router v4.

Je reçois un avertissement indiquant que <Link /> requiert le contexte d'un react-router <Router /> composant.

Comment puis-je me moquer ou fournir un contexte de routeur dans mon test? (Fondamentalement, comment puis-je résoudre cet avertissement?)

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

L'avertissement lorsque le test est exécuté:

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

Vous pouvez encapsuler votre composant dans le test avec StaticRouter pour obtenir le contexte du routeur dans votre composant:

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

Jetez un œil au routeur React documentation sur les tests

27
Andreas Köberle

J'ai eu le même problème et utiliser StaticRouter nécessiterait toujours le context qui avait besoin de plus de configuration pour l'avoir disponible dans mon test, donc j'ai fini par utiliser le MemoryRouter qui fonctionnait très bien bien et sans aucun problème.

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