Jest, React Testing Library Async Await error - reactjs

Question

React Js Code is
const AwaitAsync = () => {
const [data, setData] = useState("");
const handleClick = () => {
setTimeout(() => {
setData("Data after 4 secons")
}, 1000);
}
return (
<div>
<h2>Await Async</h2>
<h4>Data will come after 4 secons</h4>
<p>
<button onClick={handleClick}>Click to display data</button>
</p>
{
data && <p data-testid="abc">{data}</p>
}
</div>
)
}
Unit test case is but unit test case is failed
Error is: let dat = await screen.findByTestId("abc");
describe('Async Await', () => {
it("Async Await Test", async () => {
// jest.setTimeout(10000);
render(<AwaitAsync />);
const btn = screen.getByRole('button');
fireEvent.click(btn);
let dat = await screen.findByTestId("abc");
expect(dat).toHaveTextContent("Data after 4 secons")
});
})
Unit test case is failed

Answer 1

You should Enable Fake Timers
This is replacing the original implementation of setTimeout() and other timer functions.
See also testing-recipes#timers
import { fireEvent, render, screen, act } from '#testing-library/react';
import '#testing-library/jest-dom';
import React from 'react';
import { AwaitAsync } from '.';
describe('Async Await', () => {
it('Async Await Test', async () => {
jest.useFakeTimers();
render(<AwaitAsync />);
const btn = screen.getByRole('button');
fireEvent.click(btn);
act(() => {
jest.advanceTimersByTime(1000);
});
expect(screen.getByTestId('abc')).toHaveTextContent('Data after 4 secons');
});
});
Test result:
PASS stackoverflow/75395180/index.test.tsx (8.706 s)
Async Await
✓ Async Await Test (76 ms)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 9.22 s