Async beforeEach for fetching data

[LouiseReid]

Hello,

Can you tell me if this is a case of that's not doing what you think its doing, or if this is an ok testing strategy?

I have a component where I'm testing its loading ui and non loading ui.

The component has a useEffect which runs on load to fetch data.

In my test setup I am mocking the api request jest.mock("./api");

For the block where I am testing the non loading state my beforeEach looks like

  beforeEach(async () => {
    const app = setUpStore(<Component />, state);
    result = render(app.tree);
  });

And this is doing exactly what I want it to do. If I remove the async then it renders in its loading state. Is this fine to do?

[kentcdodds]

Hi @LouiseReid,

Here are a few blog posts that may help:

• https://kentcdodds.com/blog/avoid-nesting-when-youre-testing
• https://kentcdodds.com/blog/aha-testing
• https://kentcdodds.com/blog/stop-mocking-fetch
• https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

I hope that helps! Good luck!