0

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),
    });
}
MarcoLe
  • 2,309
  • 6
  • 36
  • 74
  • Could you, please, specify code for `trackNavigationClick`? – Rostyslav Sep 04 '20 at 10:46
  • 1
    @MarcoLe I think it has to do with url change. Your CallButton wrapped with an anchor element, which I think on simulate of click it changes url. I get this error too, in one of my recent tests where I do change the url deliberately in a login component. – Bikash Das Sep 11 '20 at 10:19
  • Did you manage to find a solution for this problem @MarcoLe? – sarunast Feb 01 '21 at 15:52
  • No, just ignored it as it was "only" a ugly a log in the console, but test was running fine – MarcoLe Feb 01 '21 at 16:20

0 Answers0