0

Im testing a react component with jest and the react testing library (newest versions) and i dont get the asynchron tests to work. I assume its a syntax problem. The component gets rendert correctly, and the fetch (useEffect) also seems to work due to the fact that the time out works.

test('renders asynchron', async () => {
   renderComp(); //renders component
   
   await waitFor(() => expect(screen.findByTestId('testid')).toBeInTheDocument()); //dont work
   await screen.findByTestId('testid'); //same

   setTimeout(() => {
      expect(screen.findByTestId('testid')).toBeInTheDocument(); //this works
   }, 100);

});

Also i got the same issue if i expect an element after an button click.

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
Joshua Eisenberger
  • 43
  • 4

1 Answers1

1

because following arrow function is not awaitable:

() => expect(screen.findByTestId('testid')).toBeInTheDocument()

you must Define inner function async and await for.

Aliasghar Ahmadpour
  • 436
  • 6
  • 24