vendredi 4 septembre 2020

Jest/Testing - Not implemented: navigation (except hash changes)

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