webentwicklung-frage-antwort-db.com.de

Mit Jest einen Link vom React-Router v4 testen

Ich benutze jest, um eine Komponente mit einem <Link> Von React-Router v4 zu testen.

Ich erhalte die Warnung, dass <Link /> Den Kontext von einer Komponente des Reaktionsrouters <Router /> Benötigt.

Wie kann ich in meinem Test einen Router-Kontext verspotten oder bereitstellen? (Grundsätzlich wie löse ich diese Warnung?)

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

Die Warnung, wenn der Test ausgeführt wird:

Warning: Failed context type: The context `router` is marked 
as required in `Link`, but its value is `undefined`.
24
Don P

Sie können Ihre Komponente im Test mit dem StaticRouter verpacken, um den Routerkontext in Ihre Komponente zu integrieren:

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

Schauen Sie sich den React Router an Dokumentation zum Testen

27

Ich hatte das gleiche Problem und die Verwendung von StaticRouter würde immer noch das context erfordern, das mehr Konfiguration benötigt, um in meinem Test verfügbar zu sein, also habe ich das MemoryRouter verwendet, was sehr funktionierte gut und ohne Probleme.

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