Spy on console.error doesn't work

• react-hooks-testing-library version: 5.0.3
• react version: 16.13.1
• node version: 14.15.4

Relevant code or config:

    it('should abort request if component is unmounting', async () => {
      // Given
      const consoleErrorSpy = jest.spyOn(global.console, 'error');
      const { result, unmount } = renderHook(() => useFetch('key', fetchFn));

      // When
      unmount();

      // Then
      expect(fetchFn).toHaveBeenCalledTimes(1);
      expect(result.current.status).toBe('pending');
      expect(consoleErrorSpy).not.toHaveBeenCalled();
    });

What you did:

I try to make a test failed when I get a React warning. For example, I run a race condition in my source code and I get the following error in console : Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

What happened:

This test always passed, even if the console.error is shown in the terminal so it’s a false positive test.

[mpeyper]

Asserting something didn’t occur is always tough because there is other way (that I’m aware of) than just waiting long enough for that you’re confident an update would have happened if it was going to happen. That’s what this solution does. It sets up an update to occur in 200ms, then it unmounts the component and waits for 250ms, then check that no logs were produced.

If an update happens (can only occur if the component failed to unmount for some reason - I’m not sure if that’s even possible), waitForNextUpdate wont reject, so that assertion will fail. If and update was attempted on the unmounted component, the log will be produced at around 200ms and waitForNextUpdate will reject at around 250ms, passing that assertion but failing the next one checking console.error spy.

It might have been possible to get this test working with a fake timer, but In general I don’t like faking timers. I’ve seen more cases where the tests get harder to read or become fiddly to get passing than I’ve seen the extra 250ms of test runtime become an issue, plus it gives me more confidence that it’s going to work in the real world where time can’t be controlled by calling a function.

[ludovicmnji]

My mistake, I was forget the consoleSpyError expect just after the waitForNextUpdate. This solution is very acceptable, thank you, that is what I want to achieve.

Async utils are very difficult to understand. I’m not sure to understand completely the solution anyway but you teach me a new way to handle timers with RTL.