Should we add a script load event ? #498
Comments
JulienKode
changed the title
|
What would it take to support this? It's it not already supported? |
|
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 I didn't notice that if I set the |
|
Sounds like this may be an issue with React's support of |
|
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 |
|
is this a workaround to test jQuery onload like this code ? $(() => {
console.log('testing lib onload jquery')
}) |
|
Hi everybody, I'm commenting in hopes of saving somebody the full week of frustration I had with this. I was testing a it('calls the success callback', async () => {
const params = { onSuccess, clientId, staySignedIn: true }
// This hook calls the function that adds the script to the document
renderHook(() => useGoogleLogin(params))
const script = document.querySelector('script')
fireEvent.load(script)
await waitFor(() => expect(onSuccess).toHaveBeenCalled())
})I was getting the same issue - if I set This is the function called in the hook: const loadGapiScript = (document, src, onLoad, onError) => {
const script = document.getElementsByTagName('script')[0]
let js = document.createElement('script')
js.id = 'google-auth'
js.src = src
js.async = true
js.defer = true
js.onerror = onError
js.onload = onLoad
if (script && script.parentNode) {
script.parentNode.insertBefore(js, script)
} else {
document.head.appendChild(js)
}
}The following two lines turned out to be the problem: js.onerror = onError
js.onload = onLoadChanging them to this ended up solving the issue: js.onerror = e => onError(e)
js.onload = e => onLoad(e)So, to use the original example, this should work: render(<script onLoad={e => handler(e)} src='https://example.com/test.js' />)Unfortunately I'm not sure why this solved my problem, but it did 🤷♀️ If anybody knows why this would be I'd love to know,. |
|
Firing load events at scripts is supported in For people looking for support in React: Scripts will not execute if rendered via React so it's expected that there's no So you need to manually insert the script into the DOM e.g. like in #498 (comment) |
Thank you for this nice library
Currently it's possible to trigger a
loadevent on a image:Example:
But is there any way to do that with
script?Should we implement it here
dom-testing-library/src/__tests__/events.js
Line 109 in 6c4486c
The text was updated successfully, but these errors were encountered: