React-hooks-testing-library: Question : How to test a callback in useEffect

[youf-olivier]

What is your question:

Hi,

My code is very simple, but I didnt find the way to test what I want.

I juste want to try this :

export const useMyHook = (setState) => {
  useEffect(() => {
    fakeFetch().then((val) => setState(val));
  }, [setState]);
};

I simplified my real case, but the point is here.

I tried : waitFor, waitForNextUpdate etc. I didn't find the way.

    const setState = jest.fn();
    const { waitForNextUpdate } = renderHook(() => useMyHook(setState));
    await waitForNextUpdate();
    expect(setState).toBeCalled();

This code always fails. Why? How can I test this ?

Thanks a lot, and sorry if is a dumb question...

here a CSB : https://codesandbox.io/s/romantic-newton-nk85u

[youf-olivier]

IT seems to be the same issue of #445

[mpeyper]

Yes, if there is no update to the react state, waitForNextUpdate never resolves. You could try waitFor instead:

await waitFor(() => expect(setState).toBeCalled());

[youf-olivier]

WaitFor from @testing-library/react ? I don't see where I can import Waitfor from RTL React Hook

Edit : my bad, I don't have the latest version in this branch...

[youf-olivier]

But unfortunately it doesn't works, see my CSB.

https://codesandbox.io/s/romantic-newton-nk85u?file=/src/App.spec.js

[mpeyper]

Sorry @youf-olivier, I haven't had time to get back to this, and I'm only ever on my phone when I am here (and CSB doesn't work too well on mobile).

I promise I am coming back though.

[youf-olivier]

No Problem, it's not really urgent. It's for my personal comprehesion :)

[mpeyper]

Hi @youf-olivier,

Sorry again for the delay. I forgot that by default waitFor does not do interval checking and waits for the hook to rerenender before checking again. You can opt into interval checks by setting the interval option:

await waitFor(() => expect(setState).toBeCalled(), { interval: 100 });

This will rerun the check function every 100ms.

FWIW, I plan to make this the default behaviour in the next breaking change.

[youf-olivier]

Et voilà =)

https://codesandbox.io/s/romantic-newton-nk85u?file=/src/App.spec.js:238-247

Thanks. I close this

[youf-olivier]

I Reopen Issue, because if I look At this :

https://github.com/testing-library/react-hooks-testing-library/blob/aeed751e44d2239e18197f6e692b2810b2a27e79/src/asyncUtils.js#L41-L51
The supressErrors hide the problem. So if i Change by

await waitFor(() => expect(setState).toBeCalled(), { interval: 100, suppressErrors:false });

It doesn't work anymore.

[youf-olivier]

I clone the repo, I'll try to figure it out

[mpeyper]

That looks like it's working as intended. If you turn the error suppression off, the assertion error will reject the promise and the test will fail.

[youf-olivier]

Yes I understood that when I played with the project ;D

Thanks again fo your time 🤘