I have a React component ComponentA that once renders, starts setTimeout function to delay for 500ms then render the main text. I need to test that during this 500ms the main text does not appear and I could not figure out how.
The ComponentA:
function ComponentA() {
const [showIndicator, setShowIndicator] = useState(false);
useEffect(()=> {
setTimeout(()=> setShowIndicator(true), 500);
})
return (showIndicator && <h1>Hello</h1>);
}
My current test set up so far is
import {render} from '@testing-library/react'
describe("Test Component A", () => {
test("it should not show text during first 500 ms", async () => {
// Point A: rendering time
const {container, getByText} = render(<ComponentA />)
// Point B: before delay
// Need to assert text is not shown yet before delay
await sleep(500);
// Poin C: now text should appear
expect(getByText('Hello')).toBeInTheDocument()
});
});
It is passing but I can not figure out how to assert the text does not appear before 500ms passes and how to know that the moment the assertion happens is before the 500ms. Any help is appreciated thank you
You can wait for slightly shorter and check text is not in document:
test("it should not show text during first 500 ms", async () => {
const {container, getByText} = render(<ComponentA />)
await sleep(499);
expect(getByText('Hello')).not.toBeInTheDocument()
});
Also I'm not sure what sleep is coming from but in case it makes real delay I suggest to consider fake timers instead:
test("it should not show text during first 500 ms", async () => {
const {container, getByText} = render(<ComponentA />)
jest.advanceTimersByTime(499);
expect(getByText('Hello')).not.toBeInTheDocument()
});
And finally you can merge 2 test cases together(not because I think count of test cases matters but because you actually test the same aspect related to delay before-shown):
test("shows text after 500 ms delay", async () => {
const {container, getByText} = render(<ComponentA />)
jest.advanceTimersByTime(499);
expect(getByText('Hello')).not.toBeInTheDocument()
jest.advanceTimersByTime(2);
expect(getByText('Hello')).toBeInTheDocument()
});