Jest testing JavaScript code element does not appear before setTimeout finishes-CodePudding

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

CodePudding user response：

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()
});