React-testing-library: afterEach(cleanup); isn't cleaning up after each test

[TidyIQ]

• react-testing-library version: 7.0.0
• react version: 16.8.6
• node version: 10.15.3
• npm (or yarn) version: 6.9.0

Relevant code or config:

afterEach(cleanup);

describe("Unit: <OutlinedInput />", (): void => {
  describe.each`
    data                 | showIcon | name                                     | validInput
    ${nameFieldData}     | ${false} | ${"text fields"}                         | ${"John Smith"}
    ${nameFieldData}     | ${true}  | ${"text fields with icon adornment"}     | ${"John Smith"}
    ${passwordFieldData} | ${false} | ${"password fields"}                     | ${"1234567a"}
    ${passwordFieldData} | ${true}  | ${"password fields with icon adornment"} | ${"1234567a"}
    ${emailFieldData}    | ${false} | ${"email fields"}                        | ${"[email protected]"}
    ${emailFieldData}    | ${true}  | ${"email fields with icon adornment"}    | ${"[email protected]"}
  `(
    "Initial render",
    ({ data, showIcon, name, validInput }): void => {
      it(`renders as snapshot for ${name}`, (): void => {
        const { asFragment } = render(
          <OutlinedInput fieldData={data} showIcon={showIcon} />
        );
        expect(asFragment()).toMatchSnapshot();
      });

      describe("THEN focus in", (): void => {
        it(`renders as snapshot for ${name}`, (): void => {
          const { asFragment, getByLabelText } = render(
            <OutlinedInput fieldData={data} showIcon={showIcon} />
          );
          const input = getByLabelText(data.label);
          fireEvent.focus(input);
          expect(asFragment()).toMatchSnapshot();
        });
      });

      describe("THEN valid input", (): void => {
        it(`renders as snapshot for ${name}`, (): void => {
          const { asFragment, getByLabelText } = render(
            <OutlinedInput fieldData={data} showIcon={showIcon} />
          );
          const input = getByLabelText(data.label);
          fireEvent.focus(input);
          fireEvent.change(input, { target: { value: validInput } });
          expect(asFragment()).toMatchSnapshot();
        });
      });
    }
  );
});

Notice how I have afterEach(cleanup); declared at the top of the file.

When I run the test, the snapshots created for the first test Unit: <OutlinedInput /> Initial render renders as snapshot for ${name} with icon adornment all include the validInput that is declared in the describe.each() at the top. Only the with adornment tests include the validinput, not the ones without.

This is a bug.

I know this because nowhere in that first snapshot test do I run fireEvent.change(input, { target: { value: validInput } });. That fireEvent is only run in the last snapshot test, and that is the only place that the input value can be changed.

If I change the values of validInput, e.g. to "John Brown", then the snapshot shows this new value, so I know it's getting the value from the describe.each() and not anywhere else in my code.

Also, it only occurs on every second test in the describe.each() (the ones where showIcon === true).

Here are two snapshots that show the input value is incorrectly being added for this test:

exports[`Unit: <OutlinedInput /> Initial render renders as snapshot for text fields 2`] = `
<DocumentFragment>
  <div
    class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth"
  >
    <label
      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined makeStyles-inputLabel-1"
      data-shrink="false"
      for="name"
    >
      Name Field Label
    </label>
    <div
      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiInputBase-adornedStart MuiOutlinedInput-adornedStart"
      data-testid="outlinedInputInput"
    >
      <fieldset
        aria-hidden="true"
        class="PrivateNotchedOutline-root-61 MuiOutlinedInput-notchedOutline makeStyles-notchedOutline-6"
        style="padding-left: 8px;"
      >
        <legend
          class="PrivateNotchedOutline-legend-62"
          style="width: 0.01px;"
        >
          <span>
            ​
          </span>
        </legend>
      </fieldset>
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root"
        data-testid="icon"
        focusable="false"
        role="presentation"
        viewBox="0 0 24 24"
      >
        <path
          d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
        />
        <path
          d="M0 0h24v24H0z"
          fill="none"
        />
      </svg>
      <hr
        class="MuiDivider-root makeStyles-divider-63"
      />
      <input
        aria-invalid="false"
        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart"
        id="name"
        minlength="1"
        pattern="^(?!\\\\s*$).+"
        required=""
        type="text"
        value=""     //  ***** NO ERROR HERE FOR THIS SNAPSHOT *****
      />
    </div>
    <div
      class="MuiCollapse-container MuiCollapse-hidden"
      style="min-height: 0px;"
    >
      <div
        class="MuiCollapse-wrapper"
      >
        <div
          class="MuiCollapse-wrapperInner"
        >
          <p
            class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-marginDense"
            data-testid="outlinedInputHelperText"
          />
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Unit: <OutlinedInput /> Initial render renders as snapshot for text fields with icon adornment 2`] = `
<DocumentFragment>
  <div
    class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth"
  >
    <label
      class="MuiFormLabel-root MuiFormLabel-filled MuiInputLabel-root makeStyles-labelValid-722 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined makeStyles-inputLabel-721"
      data-shrink="true"
      for="name"
    >
      Name Field Label
    </label>
    <div
      class="MuiInputBase-root MuiOutlinedInput-root makeStyles-notchedValid-725 MuiInputBase-formControl MuiInputBase-marginDense MuiInputBase-adornedStart MuiOutlinedInput-adornedStart"
      data-testid="outlinedInputInput"
    >
      <fieldset
        aria-hidden="true"
        class="PrivateNotchedOutline-root-781 MuiOutlinedInput-notchedOutline makeStyles-notchedOutline-726"
        style="padding-left: 8px;"
      >
        <legend
          class="PrivateNotchedOutline-legend-782"
          style="width: 0px;"
        >
          <span>
            ​
          </span>
        </legend>
      </fieldset>
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root makeStyles-validColor-723"
        data-testid="icon"
        focusable="false"
        role="presentation"
        viewBox="0 0 24 24"
      >
        <path
          d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
        />
        <path
          d="M0 0h24v24H0z"
          fill="none"
        />
      </svg>
      <hr
        class="MuiDivider-root makeStyles-divider-783"
      />
      <input
        aria-invalid="false"
        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart"
        id="name"
        minlength="1"
        pattern="^(?!\\\\s*$).+"
        required=""
        type="text"
        value="John Smith"    //  ***** ERROR OCCURS HERE. THIS SHOULD NOT BE HERE *****
      />
    </div>
    <div
      class="MuiCollapse-container MuiCollapse-hidden"
      style="min-height: 0px;"
    >
      <div
        class="MuiCollapse-wrapper"
      >
        <div
          class="MuiCollapse-wrapperInner"
        >
          <p
            class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-marginDense MuiFormHelperText-filled"
            data-testid="outlinedInputHelperText"
          />
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

[alexkrolick]

afterEach runs after it or test. describe blocks should not contain assertions. You can use test.each() instead.

[TidyIQ]

I can't use test.each() as it doesn't allow nesting.

Also, the describe block only contains it blocks so afterEach(cleanup) should be running after every test.

If I import the cleanup as import "react-testing-library/cleanup-after-each"; then change the afterEach to afterEach(() => console.log("test"));, I can see that afterEach is working fine. The console shows "test" for every test. The issue is with the cleanup, not with the afterEach().

[TidyIQ]

Using the same code as above that has 3 it blocks and 6 different tests to be run under describe.each(), there is a total of 18 tests performed. If I change the afterEach to:

let i = 0;
afterEach(() => {
  i++;
  return console.log(i);
});

And run the test, the console.log output is:

    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      1
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      2
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      3
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      4
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      5
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      6
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      7
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      8
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      9
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      10
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      11
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      12
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      13
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      14
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      15
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      16
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      17
    console.log components/Inputs/OutlinedInput.unit.test.tsx:67
      18

[alexkrolick]

react-testing-library/cleanup-after-each

Contents:

afterEach(require('./dist').cleanup)

What could be the difference here...?

[TidyIQ]

I can confirm that afterEach(cleanup) has a bug and isn't cleaning up the DOM between tests.

I have another test:

describe("On first click", () => {
  it("renders as snapshot", () => {
    const { asFragment, container } = render(
      <ShowHidePasswordButton {...props} />
    );
    const button = container.querySelector("button");
    fireEvent.click(button);
    expect(asFragment()).toMatchSnapshot();
  });

  it("shows the hide password icon", () => {
    const { container } = render(<ShowHidePasswordButton {...props} />);
    const button = container.querySelector("button");
    fireEvent.click(button);
    const svg = container.querySelector("svg");
    expect(svg.getAttribute("data-testid")).toBe("hidePasswordIcon");
  });
});

When I look at the snapshot created from the first test I can see that the svg element has data-testid value of hidePasswordIcon, however the second test fails with:

    expect(received).toBe(expected) // Object.is equality

    Expected: "hidePasswordIcon"
    Received: "showPasswordIcon"

If I remove the first snapshot test and only run the second test, then it passes fine. OR if I remove the fireEvent.click(button) from the second test then both tests pass fine.

The only possible cause of this is that when the first fireEvent.click(button) is called in the first snapshot test, it isn't cleaned up before the second test starts. This results in the second test starting with a fireEvent.click(button) already in the DOM, so when it runs fireEvent.click(button) within its own test, it's actually behaving as if the button was clicked twice.

The only logical conclusion to come from this, plus my original post, is that afterEach(cleanup) isn't cleaning up the DOM between tests as it's supposed to.

[TidyIQ]

Further proof: All these tests pass when they should be failing due to cleanup. Notice how two of the tests are identical yet they receive back different results for expect(svg.getAttribute("data-testid"))

afterEach(cleanup);

describe("Unit: <ShowHidePasswordButton />", (): void => {
  describe("initial render", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment } = render(<ShowHidePasswordButton {...props} />);
      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });
  });

  describe("On first click", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment, container } = render(
        <ShowHidePasswordButton {...props} />
      );
      const button: HTMLButtonElement = container.querySelector("button");

      fireEvent.click(button); // ERROR: This should be cleaned up before the next test runs  *******************

      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });

    it("shows the hide password icon", (): void => {
      const { container } = render(<ShowHidePasswordButton {...props} />);

      // ERROR: fireEvent.click(button) is not called here, yet the test passes *******************

      const svg = container.querySelector("svg");
      expect(svg.getAttribute("data-testid")).toBe("hidePasswordIcon");
    });
  });

  describe("On second click", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment, container } = render(
        <ShowHidePasswordButton {...props} />
      );
      const button: HTMLButtonElement = container.querySelector("button");

      fireEvent.click(button);

      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });

    it("shows the show password icon", async (): Promise<void> => {
      const { container } = render(<ShowHidePasswordButton {...props} />);
      const svg = container.querySelector("svg");
      expect(svg.getAttribute("data-testid")).toBe("showPasswordIcon");
    });
  });
});

[alexkrolick]

Maybe it has something to do with asFragment?

@tidyiq can you confirm cleanup-after-each does work but afterEach(cleanup) does not?

[TidyIQ]

Neither of them work.

The asFragment is cleaning up as the snapshots are being saved individually. It's just the fireEvent's that aren't cleaning up.

[alexkrolick]

Can you provide a repository or codesandbox to reproduce this in?

[TidyIQ]

Sure, the repo is here: https://github.com/TidyIQ/tidyiq_website

I've changed the repo from private to public so please let me know once you've cloned it so I can switch it back over to private again.

Once you've installed the packages run npm run unit-test and you'll see that the test in /components/EndAdornments/ShowHidePasswordButton/__tests__/index.unit.test.tsx fails due to this issue.

I've also skipped a test in /components/Inputs/OutlinedInput/__tests__/index.unit.test.tsx that has the same issue with tests failing due to fireEvent not cleaning up. Remove the .skip from the first describe and you'll get those errors too.

Thanks for the help.

[TidyIQ]

Also, I moved afterEach(cleanup) to /jest.config.unit.js as:

  setupFilesAfterEnv: ["react-testing-library/cleanup-after-each"]

as per https://testing-library.com/docs/react-testing-library/setup so I don't need to the afterEach to every test file.

[TidyIQ]

@kentcdodds Any idea what the issue is here?

[TidyIQ]

It seems that the order of how I define each element makes a difference. For example, this won't work:

describe("Unit: <ShowHidePasswordButton />", (): void => {
  describe("Initial render", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment } = render(<ShowHidePasswordButton {...props} />);
      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });
  });

  describe("On first click", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment, container } = render(
        <ShowHidePasswordButton {...props} />
      );
      const button: HTMLButtonElement = container.querySelector("button");
      fireEvent.click(button);
      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });

    it("shows the hide password icon", (): void => {
      const { container } = render(<ShowHidePasswordButton {...props} />);
      const button: HTMLButtonElement = container.querySelector("button");
      fireEvent.click(button);

      const svg = container.querySelector("svg");  // ******** Defined after the fireEvent ***************************

      expect(svg.getAttribute("data-testid")).toBe("hidePasswordIcon");
    });
  });

  describe("On second click", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment, container } = render(
        <ShowHidePasswordButton {...props} />
      );
      const button: HTMLButtonElement = container.querySelector("button");
      fireEvent.click(button);
      fireEvent.click(button);
      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });

    it("shows the show password icon", (): void => {
      const { container } = render(<ShowHidePasswordButton {...props} />);
      const svg = container.querySelector("svg");
      const button: HTMLButtonElement = container.querySelector("button");
      fireEvent.click(button);
      fireEvent.click(button);
      expect(svg.getAttribute("data-testid")).toBe("showPasswordIcon");
    });
  });
});

But this does work:

describe("Unit: <ShowHidePasswordButton />", (): void => {
  describe("Initial render", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment } = render(<ShowHidePasswordButton {...props} />);
      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });
  });

  describe("On first click", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment, container } = render(
        <ShowHidePasswordButton {...props} />
      );
      const button: HTMLButtonElement = container.querySelector("button");
      fireEvent.click(button);
      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });

    it("shows the hide password icon", (): void => {
      const { container } = render(<ShowHidePasswordButton {...props} />);
      const button: HTMLButtonElement = container.querySelector("button");

      const svg = container.querySelector("svg");  // ******** Defined before the fireEvent ***************************

      fireEvent.click(button);
      expect(svg.getAttribute("data-testid")).toBe("hidePasswordIcon");
    });
  });

  describe("On second click", (): void => {
    it("renders as snapshot", async (): Promise<void> => {
      const { asFragment, container } = render(
        <ShowHidePasswordButton {...props} />
      );
      const button: HTMLButtonElement = container.querySelector("button");
      fireEvent.click(button);
      fireEvent.click(button);
      expect(asFragment()).toMatchSnapshot();
      const screenshot = await generateImage();
      expect(screenshot).toMatchImageSnapshot();
    });

    it("shows the show password icon", (): void => {
      const { container } = render(<ShowHidePasswordButton {...props} />);
      const svg = container.querySelector("svg");
      const button: HTMLButtonElement = container.querySelector("button");
      fireEvent.click(button);
      fireEvent.click(button);
      expect(svg.getAttribute("data-testid")).toBe("showPasswordIcon");
    });
  });
});

I'm not sure why this is. I've tried using wait and waitForDomChange in case there is a lag somewhere but they both timeout whenever I try using them.

Also, the test from my original post fails more if I similarly move around the test order. The actual test I have (the one from my OP is an excerpt of it) currently fails 15 times due to this issue, but if I move around the variables in a similar fashion then it fails 21 times.

I really don't understand this. I could really use some help here.

[kentcdodds]

The example code is huge. If you could please try to reproduce this with the minimal amount of code and preferably I'm a codesandbox, then we can determine what the problem is much more easily.

[TidyIQ]

I created a minimal repo here - https://github.com/TidyIQ/rtl_test_failure

git init
git clone https://github.com/TidyIQ/rtl_test_failure.git
npm install
npm run test

[kentcdodds]

That's not minimal. Try removing as much as possible

[TidyIQ]

I've removed as much as I can without changing how the component actually works. If I remove any more then it won't be the actual component and test that I'm having issues with.

[kentcdodds]

The point of a small reproduction is to see if you can reproduce the issue with as little as possible. If you can't do that then how do we know it's not something weird your component is doing?

[TidyIQ]

I updated the repo. I've removed as much as I possibly can. I removed Material-UI completely, removed the util functions, removed all adjustments made to the base Next.js app (the .babelrc needs to stay so that it works with jest).

All that's left is the component being tested, a pages folder (which could be removed but I kept it so you can see the component works as intended if you run npm run dev), the state (which is the entire issue - it's not being cleaned up after each test), and the test. That's it, nothing else.

Honestly, if you still think it looks too big then just ignore everything and run the test and look at the console.logs. You'll see the issue straight away. The test isn't cleaning up the state after each test. Each new test starts with the same state as what the previous test returned.

I really can't simplify it any more than this.

[alexkrolick]

The test isn't cleaning up the state after each test.

OK, I think the problem is here: https://github.com/TidyIQ/rtl_test_failure/blob/master/components/state.js#L52

You have a state singleton that is shared across imports. RTL doesn't clean up your modules, it cleans up the DOM. You might try using this Jest option to clean up the module cache between tests: https://jestjs.io/docs/en/jest-object#jestresetmodules

I am not sure if that will fix the issue but I'm pretty confident it isn't something to do with react-testing-library.

[TidyIQ]

Thanks for the help. I tried resetting and isolating the StateProvider module but unfortunately it's still doing the same thing. I'll create an issue in jest's repo about it.

[mudrila]

@TidyIQ Do you have update on your issue? I have some pretty same issue, and modules resetting doesn't help me as well. I would appreciate if you give me a link to your issue at jest repo

[robkane1]

I have a similar issue, but with Svelte testing library. The underlying issue is probably the same.
As a temporary workaround, we have split our tests in to separate files and this seems to resolve this odd 'scope leak' between describe blocks.

[lukashambsch]

I also have a similar issue. I can create a new issue, but it seems to be the same as this one. I have 2 tests with asynchronous actions that pass when run individually. But when they run consecutively the second one always gets this warning:

console.error node_modules/react-dom/cjs/react-dom.development.js:545
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
        in Notify_List
        in GlobalWrapper
        in ApolloProvider

I have set up that console error to fail my tests. I believe it is related to notifications that are removed from the dom after 4 seconds. I thought the cleanup function that runs after each test would prevent these types of leaks on async tests.

My app is written with reason-react and also uses apollo-graphql, which has given me quite a few moving parts. But I think I reproduced something similar in this codesandbox. Oddly enough, both tests pass on the first run. But if you rerun the all of the tests some failures start occurring. Please let me know if I can provide any additional information.

https://codesandbox.io/s/small-fire-2z6sb

[kentcdodds]

Hi @lucas0707,

I thought the cleanup function that runs after each test would prevent these types of leaks on async tests.

It does run after each test, but it doesn't side-step the need for you to handle cleanup in your individual components to avoid memory leaks. What this error is saying is basically: "Hey, I tried to unmount your component, but after I did, you tried to update the component I unmounted. You need to handle this and not try to update components after they're unmounted."

This might be helpful as well: https://www.youtube.com/watch?v=8BNdxFzMeVg&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u

Good luck!

[lucas0707]

@kentcdodds I think you mentioned the wrong Lucas.

[kentcdodds]

lol, whoops 😅 sorry about that!

[sjbuysse]

@kentcdodds
I have a related issue now.
I get the Warning: An update to Sidenav inside a test was not wrapped in act(...). when I run the test suite in ./src/__tests__/App.spec.tsx
When I add an afterEach block with a cleanup() in the describe block, the warning goes away!

The warning started showing up after I added tests where a user presses the hamburger icon (which triggers an animation), and only if I had 2 or more of these tests. This made me believe that the cleanup didn't happen properly in between tests.

Here's a codesandbox with a copy of my project: https://codesandbox.io/s/x54uy
The warning does not show up on codesandbox , but this way it's easy to see the setup.

[RichieRunner]

Same issue as @TidyIQ , @mudrila , @robkane1 , and @lukashambsch . No amount of cleanup(), 'jest.resetModules()', document.innerBody = '' will clear the store state between each test in a test suite.

For context, I am passing in a mock store state to a StoreProvider, which then assign props to my components through Redux's mapStateToProps. If I modify the initial state in one test, that state gets persisted in the subsequent test in the same run. I thought each component render is supposed to be tested in isolation, and each mock store state provided should be a new object. But looks like RTL is caching the store state somewhere.

[kentcdodds]

This issue is closed. If you think this is related to any issue you're having, it's most likely not. Open a new issue with a minimal reproduction. You might also benefit from reading these:

• https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
• https://kentcdodds.com/blog/avoid-nesting-when-youre-testing
• https://kentcdodds.com/blog/write-fewer-longer-tests