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