react-testing-library not cleaning up after fire event - reactjs

Question

We have been using React hooks useReducer and useContext to handle a global store in our react app.
When running testing using react testing library we noticed that once our state is changed inside of one test all the tests that follow now have that state change.
We have attempted doing a cleanup with afterEach(cleanup) but that did not work.
Not sure what is going on?
import React, { useContext, useReducer } from 'react'
import { render, fireEvent } from '#testing-library/react'
import '#testing-library/jest-dom/extend-expect'
import TodosList from './TodosList'
import reducer from '../../reducers/reducer'
import Store from '../../context'
import fixture from '../../tests/fixtures'
function Component() {
const [state, dispatch] = useReducer(reducer, fixture)
return (
<Store.Provider value={{ state, dispatch }}>
<TodosList />
</Store.Provider>
)
}
describe('todos', () => {
it('removes a todo when button is pressed', () => {
const { getByTestId, getAllByText } = render(<Component />)
expect(getAllByText('Delete').length).toBe(3)
window.confirm = jest.fn().mockImplementation(() => true)
fireEvent.click(getByTestId('delete-1'))
expect(window.confirm).toHaveBeenCalled()
expect(getAllByText('Delete').length).toBe(2)
})
it('check that first test did not effect this test', () => {
const { getByTestId, getAllByText } = render(<Component />)
expect(getAllByText('Delete').length).toBe(3) //this fails and is 2
})
})

Answer 1

I have encountered same problem and I came to the conclusion that
cleanup Unmounts React trees that were mounted with render, but doesn't reset state from stores/reducers.
In my case, since I'm using another library for central state management, my solution was to create a reset function in my store and call it at the beginning of each test. You can either use the same approach which in my opinion is closer to how the user would use the app, or follow the next one.
In the official recommendation on working with Redux they recommend recreating your own render function and provide your store to it
https://testing-library.com/docs/example-react-redux
function render(
ui,
{
initialState = reducerInitialState,
store = createStore(reducer, initialState),
...renderOptions
} = {}
) {
function Wrapper({ children }) {
return <Provider store={store}>{children}</Provider>
}
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}
// re-export everything
export * from '#testing-library/react'
// In your test
const store = createStore(() => ({ count: 1000 }))
render(<Counter />, {
store,
});