Dom-testing-library: Should we add a script load event ?

Created on 24 Mar 2020  路  5Comments  路  Source: testing-library/dom-testing-library

Thank you for this nice library

Currently it's possible to trigger a load event on a image:
Example:

const { getByTestId, debug } = render(<Stuff/>);

fireEvent.load(getByTestId('my-stuff'));

expect(stuff).toHaveBeenCalledWith(true);

But is there any way to do that with script ?
Should we implement it here https://github.com/testing-library/dom-testing-library/blob/6c4486c5c290aac515f103314428a9ab2e2873fb/src/__tests__/events.js#L109

needs investigation
Source
picture JulienKode

Most helpful comment

I'm digging a little. This test fails (using react testing lib):

test('can load a script', () => {
    const handler = jest.fn();
    render(<script onLoad={handler} src="https://example.com/test.js" />);
    const script = document.querySelector('script');
    expect(handler).not.toHaveBeenCalled();
    fireEvent.load(script);
    expect(handler).toHaveBeenCalled(); // Was not called.
});

But this one succeeds:

test('can load a script', () => {
    const handler = jest.fn();
    render(<script src="https://example.com/test.js" />);
    const script = document.querySelector('script');
    script.onload = handler;
    expect(handler).not.toHaveBeenCalled();
    fireEvent.load(script);
    expect(handler).toHaveBeenCalled();
});

As you can see, the only difference is that the handler is set indirectly. So there may be an issue wrt. setting the handler?

picture gertsonderby on 18 May 2020
👍3 ❤2 🎉2 🚀1

All 5 comments

What would it take to support this? It's it not already supported?

kentcdodds picture kentcdodds on 10 May 2020

I'm digging a little. This test fails (using react testing lib):

test('can load a script', () => {
    const handler = jest.fn();
    render(<script onLoad={handler} src="https://example.com/test.js" />);
    const script = document.querySelector('script');
    expect(handler).not.toHaveBeenCalled();
    fireEvent.load(script);
    expect(handler).toHaveBeenCalled(); // Was not called.
});

But this one succeeds:

test('can load a script', () => {
    const handler = jest.fn();
    render(<script src="https://example.com/test.js" />);
    const script = document.querySelector('script');
    script.onload = handler;
    expect(handler).not.toHaveBeenCalled();
    fireEvent.load(script);
    expect(handler).toHaveBeenCalled();
});

As you can see, the only difference is that the handler is set indirectly. So there may be an issue wrt. setting the handler?

gertsonderby picture gertsonderby on 18 May 2020
👍3 ❤2 🎉2 🚀1

@gertsonderby I didn't notice that if I set the onload directly in the script it work

JulienKode picture JulienKode on 26 May 2020

Sounds like this may be an issue with React's support of onLoad?

kentcdodds picture kentcdodds on 26 May 2020

Possibly. Although I don't think they're all too interested in supporting script tags like that, it seems out of scope.

Personally, I would add them to <head> with auseEffect hook instead of rendering them directly.

gertsonderby picture gertsonderby on 26 May 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nazanine picture nazanine  路  3Comments
rbrtsmith picture rbrtsmith  路  4Comments
sompylasar picture sompylasar  路  3Comments
Pau1fitz picture Pau1fitz  路  4Comments
EvgenyOrekhov picture EvgenyOrekhov  路  3Comments