Testing Async `componentdidmount()` With Jest + React-testing-library

I have a component that fetches data asynchronously in componentDidMount() componentDidMount() { const self = this; const url = '/some/path'; const data = {} const config

Solution 1:

It depends on what your component is doing. Imagine your component shows a loading message and then a welcome message. You would wait for the welcome message to appear:

const { getByText, findByText } = render(<MyComponent />)
expect(getByText('Loading...')).toBeInTheDocument()
expect(awaitfindByText('Welcome back!')).toBeInTheDocument()

The best way to think about it is to open the browser to look at your component. When do you know that it is loaded? Try to reproduce that in your test.