enzyme's mount fails second time

Question

I am testing a redux-connected component. My component uses useSelector, so I am using some advice from this answer to mock the response from useSelector, and that's working great. Here's my test:

it("renders consistently and correctly", () => {
  const store = createStore(rootReducer);
  const spy = jest.spyOn(redux, "useSelector");
  spy.mockReturnValue([
    {
      message: "This is a test success message",
      status: "SUCCESS",
    },
  ]);

  const wrapper = mount(
    <Provider store={store}>
      <GlobalSnackbar />
    </Provider>
  );
  expect(wrapper).toMatchSnapshot();
  expect(wrapper.find("SnackbarNotification")).toHaveLength(1);
});

I want to separate these tests into multiple it statements, as there are more things I want to test for this given scenario (or maybe with different responses from mockReturnValue). But when I try to separate these two expect statements into 2 different it statements, the second one fails, with this error:

Expected length: 1
    Received length: 0
    Received object: {}

      109 |   );
      110 |   expect(wrapper).toMatchSnapshot();
    > 111 |   expect(wrapper.find("SnackbarNotification")).toHaveLength(1);

I tried copying and pasting the entire test and running it one after the other. The second always fails. I'm not sure why the Recieved object is {} the second time. Shouldn't it be exactly the same? I've tried using wrapper.unmount() at the end of the first test, with no change in results. What kind of cleanup / reset do I need to perform to get a series of tests like this working?

Answer 1

Try this:

describe("some tests", () => {
    const store = createStore(rootReducer);
    let spy, wrapper;

    after(() => wrapper.unmount());
    afterEach(() => spy.mockRestore()); // Or maybe spy.mockClear()

    it("renders consistently and correctly", () => {
      spy = jest.spyOn(redux, "useSelector");

      spy.mockReturnValue([
        {
          message: "This is a test success message",
          status: "SUCCESS",
        },
      ]);

      wrapper = mount(
        <Provider store={store}>
          <GlobalSnackbar />
        </Provider>
      );

      expect(wrapper).toMatchSnapshot();
    });

    it("renders consistently and correctly 2", () => {
      spy = jest.spyOn(redux, "useSelector");

      spy.mockReturnValue([
        {
          message: "This is a test success message",
          status: "SUCCESS",
        },
      ]);

      wrapper = mount(
        <Provider store={store}>
          <GlobalSnackbar />
        </Provider>
      );

      expect(wrapper.find("SnackbarNotification")).toHaveLength(1);
    });
});

Now after each test the wrapper is unmounted and the spy is restored, also the store is now always the same for both tests.