Testing Asynchronous State Update in React Component not possible

[Muhamedkaric]

Describe the bug

I tried various combinations and non of them helped to execute test properly. Basically if you try to fire onChange event on input field in your component and that onChange has timeout set which will call setState when cb executed.

Reproduction

describe('DummyComponent Test', () => {
  beforeAll(() => {
    vi.useFakeTimers();
  });

  afterAll(() => {
    vi.useRealTimers();
  });

  test('should type in input and handle timeout', async () => {
    render(<DummyComponent />);
    console.log('Rendered');

    const inputElement = screen.getByTestId('inputid') as any;

    await act(async () => {
      userEvent.type(inputElement, 'Test');
      console.log('User typed in input');
    });

    console.log('Before running timers');
    act(() => {
      vi.runAllTimers();
    });
    console.log('After running timers');

    console.log('Assertions');
    try {
      // Check input value directly
      console.log('Input value:', inputElement.value);
      expect(inputElement.value).toBe('Test');

      // Check updated text in the div
      const updatedElement = await screen.findByText('Test');
      console.log('Found element with text:', updatedElement.textContent);
      expect(updatedElement).toBeInTheDocument();
    } catch (error) {
      console.error('Error during assertion:', error);
    }
  });
});
const DummyComponent = () => {
  const [text, setText] = useState('Initial');
  const timerRef = useRef<any>(null);

  useEffect(() => {
    console.log('Component did mount');
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
        console.log('Timer cleared on unmount');
      }
    };
  }, []);

  function onChange(asd: string) {
    console.log('onChange called with:', asd);

    if (timerRef.current) {
      clearTimeout(timerRef.current);
      console.log('Existing timer cleared');
    }

    timerRef.current = setTimeout(() => {
      console.log('timeout cb called with:', asd);
      setText(asd);
      console.log('setText called with:', asd);
    }, 30000);
    console.log('New timer set');
  }

  useEffect(() => {
    console.log('Component did update, text:', text);
  }, [text]);

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => {
          console.log('input onChange event with:', e.target.value);
          onChange(e.target.value);
        }}
        data-testid="inputid"
      />
      <div>{text}</div>
    </div>
  );
};

output is:

Component did mount
Component did update, text: Initial
Rendered
User typed in input
Before running timers
After running timers
Assertions
Input value: Initial
Error during assertion: AssertionError: expected 'Initial' to be 'Test' // Object.is equality

System Info

vite.config.ts:
  test: {
    globals: true,
    environment: 'happy-dom',
    setupFiles: './src/setupTests.ts',
    include: ['src/**/*.test.{js,ts,jsx,tsx}'],
    exclude: [...configDefaults.exclude, '**/node_modules/**', '**/build/**']
  },


setupTests.ts

import '@testing-library/jest-dom';
import * as matchers from '@testing-library/jest-dom/matchers';
import { cleanup } from '@testing-library/react';

afterEach(() => {
  cleanup();
});
expect.extend(matchers);

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Muhamedkaric]

Solution is to use it like this:

beforeEach(() => {
    vi.useFakeTimers();
  });

  afterAll(() => {
    vi.useRealTimers();
  });

  test('should type in input and handle timeout', async () => {
    render(<DummyComponent />);
    const inputElement = screen.getByTestId('inputid') as any;
    fireEvent.change(inputElement, { target: { value: 'Test' } });
    vi.runAllTimers();
    vi.useRealTimers();
    const updatedElement = await screen.findByText('Test');
    expect(updatedElement).toBeInTheDocument();
  });

key points:

• beforeEach use fake timers
• before doing screen.findBy.... use again real timers or it will stuck forever
• when using screen.findBy you don't need things above being wrapped in act...