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.
Edit
if necessarry I can also provide code of trackNavigationClick func:
export function trackNavigationClick({ e, item, navigationItems, category, action, label }) {
e.stopPropagation();
trackAnalyticsEvent({
category,
action,
label: label || getTrackingLabel(item, navigationItems),
});
}