Estoy usando el gancho UseHistory en react router v5.1.2 con typecript? Cuando ejecuto la prueba unitaria, tengo un problema.
TypeError: No se puede leer la propiedad 'historial' de indefinido.
import { mount } from 'enzyme';
import React from 'react';
import {Action} from 'history';
import * as router from 'react-router';
import { QuestionContainer } from './QuestionsContainer';
describe('My questions container', () => {
beforeEach(() => {
const historyHistory= {
replace: jest.fn(),
length: 0,
location: {
pathname: '',
search: '',
state: '',
hash: ''
},
action: 'REPLACE' as Action,
push: jest.fn(),
go: jest.fn(),
goBack: jest.fn(),
goForward: jest.fn(),
block: jest.fn(),
listen: jest.fn(),
createHref: jest.fn()
};//fake object
jest.spyOn(router, 'useHistory').mockImplementation(() =>historyHistory);// try to mock hook
});
test('should match with snapshot', () => {
const tree = mount(<QuestionContainer />);
expect(tree).toMatchSnapshot();
});
});
También he intentado usar jest.mock('react-router', () =>({ useHistory: jest.fn() }));
pero todavía no funciona.
reactjs
typescript
react-router
jestjs
enzyme
Ivan Martinyuk
fuente
fuente
Aquí hay un ejemplo más detallado, tomado del código de prueba de trabajo (ya que tuve dificultades para implementar el código anterior):
Component.js
Component.test.js
fuente
En el repositorio de github react-router encontré que useHistory hook usa contexto singleton, cuando comencé a usarlo en Mount MemoryRouter encontró contexto y comenzó a funcionar. Así que arréglalo
fuente