Fails to cleanup dom after test causing test bleeding

[brianHaleyEmpire]

• @testing-library/react version: 12.1.5
• Testing Framework and version: [email protected]
• [email protected]

Relevant code or config:

Cannot submit full code but this should provide an idea of what is happening

// using MSW, react testing, unmigrated enzyme

// src/setupTests.ts
enzymeConfigure({ adapter: new Adapter() })

configure({asyncUtilTimeout: 2000})

// Establish API mocking before all tests.
beforeAll(() => server.listen())

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => {
    server.resetHandlers()
    localStorage.clear()
    store.dispatch(api.util.resetApiState())
    store.dispatch(productApi.util.resetApiState())
})

// Clean up after the tests are finished.
afterAll(() => server.close())


// Component
function MuiTabs(): JSX.Element {
    return <Tabs>
        {tabs.map((tab, index) => <Tab label={`Tab ${index + 1}`} />)}
    </Tabs>
}

// Tests
describe('mui tab test', () => {
    let user: UserEvent

    const customRender = (setup?: () => void) => {
        if (setup) setup()
        render(
            <Provider store={store}>
                <MuiTabs />
            </Provider>
        )
    }

    beforeEach(() => {
        user = userEvent.setup()
    })

    it('selects 2nd tab', async () => {
        customRender(() => make2Tabs)

        expect(await screen.findByRole('tab', {name: 'Tab 1', selected: true}))
        expect(screen.getByRole('tab', {name: 'Tab 2', selected: false}))

        await user.click(screen.getByRole('tab', {name: 'Tab 2'}))
        expect(await screen.findByRole('tab', {name: 'Tab 1', selected: false}))
        expect(screen.getByRole('tab', {name: 'Tab 2', selected: true}))
    })

    it('some other test', async () => {
        customRender(() => make3Tabs)

        expect(await screen.findByRole('tab', {name: 'Tab 1', selected: true}))  // fails tab 2 is still selected
    })
})

What you did:

Test

What happened:

Dom was not cleared and the state at the point of testing was the merged state of the previous and current state

The beginning of all my tests is to have the first tab selected and any other tabs unselected. At the beginning of one of my tests the 2nd tab is selected and the only way that is possible is that the last test was not cleaned up

First test ending

Tab 1	Tab 2
selected	unselected

Second test starting

Tab 1	Tab 2	Tab 3
unselected	selected	unselected

Reproduction:

Possibly on request

Problem description:

Title

Suggested solution:

Clear the dom

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://react.new), or a link to a repository on GitHub.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[eps1lon]

Closing since no repro was provided