`renderHook` result values with `waitFor` not working

Describe the bug

Using the new renderHook function included in this library does not behave the same way when it comes to awaiting different return values as the other implementations (referencing specifically react-hooks + testing-library/react).

Trying to waitFor different values to change from the hook directly does not seem to be functioning as expected.

Expected behavior

If https://github.com/testing-library/react-hooks-testing-library is going to be deprecated in favor of this library, I’d expect to retain the same functionality the previous library offered since it was created to test complex hooks without the need for testing the components using these hooks as well. I’d also expect similar functionality to the testing-library/react implementation.

waitFor should be able to handle waiting for the values of the hook to match the expectation passed to it

Steps to Reproduce

Consider the following hook:

const useCount = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const retrieveCount = async () => {
      await new Promise(resolve => {
        setTimeout(() => {
          resolve(undefined)
        }, 500)
      })

      setCount(10)
    }

    retrieveCount()
  }, [])

  return count
}

If we wanted to try and waitFor count to be 10, there doesn’t appear to be a way to do this with testing-library/react-native as we can with the others:

  it('waits until count has been set', async () => {
    const { result } = renderHook(() => useCount())
   
    // this line will always fail. `result.current` is always 0, no matter the options/rerendering/etc
    await waitFor(() => expect(result.current).toBe(10))

    // this syntax will also seemingly not do anything, which worked previously in the react-hooks library
    await waitFor(() => result.current === 10)

    expect(true).toBeTrue()
  })

The above example will work just fine in testing-library/react, however.

Screenshots

Versions

[pierrezimmermannbam]

@bkdev98 I made the following changes in your test and it now works

describe("useProductDetail", () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  test("should instantly show initial product data", async () => {
    jest.useFakeTimers();

    const { result } = renderHook(() => useTestAsyncHook());

    await waitFor(() => expect(result.current).toBe(true), { timeout: 2500 });

    expect(result.current).toEqual(true);
  });
});

As @mdjastrzebski mentioned the callback provided to waitFor should throw when the expectation is not met and also since you have a setTimeout of 2000ms, you need to increase the waitFor timeout which is of 1000ms per default so that fake timers are advanced by 2000ms, else it will timeout after 1000s

[kylebake]

Looks like I’m no longer able to reproduce the issue with v11.2.0, thanks for all the collaboration on this! Apologies for my slow responses, I’ll try to help out more moving forward with this repo if I can