DEV Community

Rex
Rex

Posted on • Updated on

Testing useDebouncedValue Hook

Subject Under Test(sut):

A hook that debounces value to eliminate the performance penalty caused by rapid changes to a value. Source: usehooks.com

Behaviour:

Should only emit the last value change when specified debounce time is past.

Code:

Notes:

  1. The test uses a React Component to test the sut's behaviour. It shows how the hook should be used.

  2. The Test uses useFakeTimers to control the pass of time and assert when the debounced value should and should not be changed

One weird and interesting behavior of Jest's fake timer is that the fake timer somehow got influenced by other tests before it:

If I move the second describe block (not using the fake timer) before the first, the last assessment fails:

 act(() => {
      jest.advanceTimersByTime(1);
    });

    expect(debouncedValue.textContent).toBe('3'); // fails, got 0 instead of 3
    expect(value.textContent).toBe('3');
Enter fullscreen mode Exit fullscreen mode

If anyone knows why the above fails, please, please let me know, I would be most grateful.

Discussion (0)