Estou usando o gancho UseHistory no roteador de reação v5.1.2 com texto datilografado? Ao executar o teste de unidade, tenho um problema.
TypeError: Não é possível ler a propriedade 'history' 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();
});
});
Também tentei usar, jest.mock('react-router', () =>({ useHistory: jest.fn() }));
mas ainda não funciona.
reactjs
typescript
react-router
jestjs
enzyme
Ivan Martinyuk
fonte
fonte
Aqui está um exemplo mais detalhado, retirado do código de teste de trabalho (desde que tive dificuldade em implementar o código acima):
Component.js
Component.test.js
fonte
No repositório github react-router, descobri que o gancho useHistory usa o contexto singleton; quando comecei a usar o mount MemoryRouter, ele encontrou o contexto e começou a trabalhar. Então conserte
fonte