Discussion on: What's the issue with the MockedProvider component?

Hi there!

waitForExpect is not wrapping your callback with act (like it should in react), thus causing that error.

My recommendation would be to use @testing-library/react wait function.

await wait(() => {
      wrapper.update();
      expect(wrapper.find('.productName').length).toEqual(2);
    });

This approach should make your second and third test warnings go away.

As for the first test (which also throws this warning)

    // const wrapper = ...
    expect(wrapper.exists()).toEqual(true);
    expect(wrapper.text()).toEqual('Loading store data...');
   // warning actually is being thrown after this line /\

So what actually happens? Well, you make an assertion for loading state which passes, then, very loosely named, next tick happens and state updates to an error (asynchronously) and the test finishes. What you have to do in such situations is to queue a task (task-queue) that contains an act, after the assertion, like so:

    // const wrapper = ...
    expect(wrapper.exists()).toEqual(true);
    expect(wrapper.text()).toEqual('Loading store data...');
    await act(async () => await Promise.resolve());

The error will go await. act will put your callback inside batch update when React flushes tasks, guaranteeing that any left-overs async updates are taken care of.

You should give @testing-library/react a shot! in my opinion, it's much better than enzyme.

I'm not an expert and the things I said about the task queue and stuff may be wrong. It's just how I think about it.

Cheers!