reactjs - 火灾事件后 react 测试库未清理

Question

我们一直在使用 React hooks useReducer和 useContext在我们的 react 应用程序中处理全局商店。

当使用 react 测试库运行测试时，我们注意到一旦我们的状态在一个测试中发生变化，所有随后的测试现在都会发生状态变化。

我们尝试使用 afterEach(cleanup) 进行清理。但这没有用。

不知道发生了什么？

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

我遇到了同样的问题，我得出的结论是cleanup卸载使用 render 安装的 React 树，但不会从 store/reducers 重置状态。
就我而言，由于我使用另一个库进行中央状态管理，我的解决方案是在我的商店中创建一个重置函数并在每次测试开始时调用它。您可以使用我认为更接近用户使用应用程序的方法，也可以使用下一种方法。
在使用 Redux 的官方建议中，他们建议重新创建自己的渲染函数并为其提供商店
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,
});