react router - test - Uso de Jest para probar un enlace desde react-router v4

test routes jest

Question

Estoy usando jest para probar un componente con un <Link> de react-router v4.

Recibo una advertencia de que <Link /> requiere el contexto de un componente <Router /> enrutador de reacción.

¿Cómo puedo simular o proporcionar un contexto de enrutador en mi prueba? (Básicamente, ¿cómo resuelvo esta advertencia?)

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

La advertencia cuando se ejecuta la prueba:

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

Answer 1

Las soluciones anteriores tienen un defecto predeterminado común:

No se puede acceder a la instancia de su componente! Porque el componente StaticRouter o StaticRouter envolvió su componente.

Así que lo mejor para resolver este problema es simular un contexto de enrutador, codifique de la siguiente manera:

import { configure, mount } from ''enzyme'';
import Adapter from ''enzyme-adapter-react-16'';

describe(''YourComponent'', () => {
  test(''test component with react router'', () => {
    // mock react-router context to avoid violation error
    const context = {
      childContextTypes: {
        router: () => void 0,
      },
      context: {
        router: {
          history: createMemoryHistory(),
          route: {
            location: {
              hash: '''',
              pathname: '''',
              search: '''',
              state: '''',
            },
            match: { params: {}, isExact: false, path: '''', url: '''' },
          }
        }
      }
    };
    // mount component with router context and get component''s instance
    const wrapper = mount(<YourComponent/>, context);
    // access your component as you wish
    console.log(wrapper.props(), wrapper.state())
  });
  beforeAll(() => {
    configure({ adapter: new Adapter() });
  });
});

Answer 2

Puede envolver su componente en la prueba con el StaticRouter para obtener el contexto del enrutador en su componente:

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

Echa un vistazo a los documentos del enrutador de reacción sobre las pruebas

Answer 3

Tenía el mismo problema y el uso de StaticRouter aún requeriría el context que necesitaba más configuración para tenerlo disponible en mi prueba, así que terminé usando el MemoryRouter que funcionó muy bien y sin ningún problema.

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

Answer 4

mi prueba como esta

import * as React from ''react''
import DataBaseAccout from ''../database-account/database-account.component''
import { mount } from ''enzyme''
import { expect } from ''chai''
import { createStore } from ''redux''
import reducers from ''../../../reducer/reducer''
import { MemoryRouter } from ''react-router''

let store = createStore(reducers)

describe(''mount database-account'', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(
      < MemoryRouter >
        <DataBaseAccout store={store} />
      </MemoryRouter >
    )
  })

  afterEach(() => {
    wrapper.unmount()
    wrapper = null
  })
})

pero no sé por qué MemoryRouter puede resolver esto