I have a simple react comp. which I want to test the onclick handler on:
react-comp
const CallButton = ({ phoneLabel, phoneNumber }) => {
function onClick(e) {
trackNavigationClick({...});
}
return (
<a href={`tel:${phoneNumber}`} className={styles.callButton} onClick={onClick}>
<Icon name="phone" size={20} className={styles.callIcon} />
<span>{phoneLabel}</span>
<sup className={styles.asterisk}>*</sup>
</a>
);
};
Now when testing, the test runs through:
jest test
jest.mock('../../../helper/trackNavigation', () => ({
trackNavigationClick: jest.fn(),
}));
describe('CallButton', () => {
it('should track on click', async () => {
const phoneLabel = 'Hotline';
const phoneNumber = '089/12345';
const { queryByText } = renderWithIntl(
<CallButton phoneLabel={phoneLabel} phoneNumber={phoneNumber} />,
);
fireEvent.click(queryByText(phoneLabel));
await waitFor(() => {
expect(trackNavigationClick).toHaveBeenCalledWith({...});
});
});
});
but I get an ugly error in the console:
console.error
Error: Not implemented: navigation (except hash changes)
at module.exports (/Users/lekoma/evelin/header-fragment/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at navigateFetch (/Users/lekoma/evelin/header-fragment/node_modules/jsdom/lib/jsdom/living/window/navigation.js:76:3)
at exports.navigate (/Users/lekoma/evelin/header-fragment/node_modules/jsdom/lib/jsdom/living/window/navigation.js:54:3)
at Timeout.setTimeout (/Users/lekoma/evelin/header-fragment/node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)
at listOnTimeout (internal/timers.js:535:17)
at processTimers (internal/timers.js:479:7) undefined
Does someone of you know how this fix this error, without modifing the production code? I also saw there is alrady a stackoverflow-ref: Specify window.location for each test file for Jest but that did not help me, or at least did not know where to use the workaorund in my test.
Aucun commentaire:
Enregistrer un commentaire