React Testing Library render leaking between tests - react-testing-library

Question

I'm currently writing some tests and noticed that the rendered screen is being carried over between tests.
The following 3 tests are being affected:
describe('rolls', () => {
it('are ordered', async () => {
render(
<Provider store={store}>
<RollGroup group={0} abilities={mockAbilities} />
</Provider>
);
await clickAllRollButtons();
for (const { rolls } of store.getState().rollGroups[0]) {
for (let i = 0; i < (rolls?.length as number) - 1; ++i) {
expect((rolls as number[])[i]).toBeGreaterThanOrEqual(
(rolls as number[])[i + 1]
);
}
}
});
it('are between 1 and 6', async () => {
render(
<Provider store={store}>
<RollGroup group={0} abilities={mockAbilities} />
</Provider>
);
await clickAllRollButtons();
for (const roll of store
.getState()
.rollGroups[0].reduce(
(prev: number[], { rolls }) => prev.concat(rolls as number[]),
[] as number[]
)) {
expect(roll).toBeGreaterThanOrEqual(1);
expect(roll).toBeLessThanOrEqual(6);
}
});
});
it('removes selected options from options of other dropdowns', async () => {
render(
<Provider store={store}>
<RollGroup group={0} abilities={mockAbilities} />
</Provider>
);
await clickAllRollButtons();
const dropdowns = screen.getAllByLabelText(/Select ability/i);
const selected = [];
await userEvent.selectOptions(dropdowns.at(0) as HTMLElement, 'CON');
selected.push('CON');
const secondDropdown = dropdowns.at(1) as HTMLSelectElement;
for (const s of selected) {
expect(getSelectOptions(secondDropdown)).not.toContain(s);
}
await userEvent.selectOptions(secondDropdown, 'STR');
selected.push('STR');
const thirdDropdown = dropdowns.at(2) as HTMLSelectElement;
for (const s of selected) {
expect(getSelectOptions(thirdDropdown)).not.toContain(s);
}
await userEvent.selectOptions(thirdDropdown, 'DEX');
selected.push('DEX');
const fourthDropdown = dropdowns.at(3) as HTMLSelectElement;
for (const s of selected) {
expect(getSelectOptions(fourthDropdown)).not.toContain(s);
}
await userEvent.selectOptions(fourthDropdown, 'INT');
selected.push('INT');
const fifthDropDown = dropdowns.at(4) as HTMLSelectElement;
for (const s of selected) {
expect(getSelectOptions(fifthDropDown)).not.toContain(s);
}
await userEvent.selectOptions(fifthDropDown, 'CHA');
selected.push('CHA');
const sixthDropdown = dropdowns.at(5) as HTMLSelectElement;
for (const s of selected) {
expect(getSelectOptions(sixthDropdown)).not.toContain(s);
}
});
Also relevant to the issue is the clickAllRollButtons function:
const clickAllRollButtons = async () => {
for (const button of screen.getAllByText(/Roll/i)) {
await userEvent.click(button);
}
};
When I try running the entire suite of tests, the tests fail with the following error:
TestingLibraryElementError: Unable to find an element with the text: /Roll/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
I looked at the markup returned in the error message and it's the markup I expect to see after all the roll buttons are clicked and there are none left. However, when I run only one of the tests using it.only, I get a success.
At first, I thought it might be an issue with my redux store carrying state between tests. I tried replacing the use of store with a mock store that gets set before each tests like so:
beforeEach(() => {
mockStore = {...store};
});
This did not work. With that in mind, the only reason I can see this happening is that react testing library is keeping the same screen state between tests, possibly because they all use the same jsx. If I'm correct, is there a way to clear the screen between each test? If not, what can I do?
Update: I made a codesandbox to reproduce the issue.

Answer 1

It turns out the issue was with my redux store. Reusing the same store between tests caused the state to leak into other tests. I solved this by exporting a function getStore and calling that whenever I need the store instead of exporting store.