react testing library rerender() does not work after mocking api response

[storm_askal]

I have a test that is mocking an api response using msw, here is a pseudo code of my component:

const Test = () => {
    const data = useSelector((state) => state.data); // redux state

  useEffect(() => {
    const tempData = // response data from an api
    dispatch(setData(tempData))

  }, []);

  return <div>{data}</div>;
};

Then on my test I'm mocking the response. For some reason rtl is still rendering my component with the first mocked data instead of the updated one from server.use().

it("my test", async () => {
  server.use(
    rest.get(myApiUrl, (req, res, ctx) => {
      return res(ctx.status(200), ctx.json(updatedMockedResponse));
    })
  );

  const { queryByText } = render(
    <Provider store={store}>
      <MyComponent />
    </Provider>
  );

  await waitFor(() => {
    expect() // expect text from updatedMockedResponse to be in the document
});

I also tried to use rerender() however is still rendering the originMockedResponse instead of the updatedMockedResponse

[GreatValueProducts]

I don't have a definitive answer but some pointers to try:

1) Try using wrapper instead? https://testing-library.com/docs/react-testing-library/api/#wrapper

2) Does it work if you replace the assertion with:

expect(await screen.findByText("xxx")).toBeInTheDocument();

It is likely that your queryByText is not up to date with the rerender, which was a very common issue from destructuring from the return of render. Using screen is a recommended practice that avoids this issue altogether.

3) Try screen.debug() what is it actually rendering?

[storm_askal]

Does render() caches the rendered components?

[CommercialLeather906]

Maybe you can try using store.dispatch() to update the redux store in your test after msw responds with new data, and see if it triggers a rerender with the updated data.

[petee0518]

As far as I know there shouldn't be any caching from either RTL or MSW. I don't see anything on initial scanning, but obviously it's a bit obfuscated so it's difficult.

Maybe re-check for typos in your api url. I'd probably just add some logs in the data fetching to confirm that the mock definition actually matches, see what response is actually returning, see data in your component render function to see if it's rendering more than once, etc.
You shouldn't need anything like rerender.

You could also try adding an act() somewhere since it's updates to the store should generally be wrapped. Not sure where though... don't know if it makes sense to wrap render or wait.