火灾事件后反应测试库没有清理

Question

我们一直在使用 React 钩子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卸载通过渲染安装的 React 树，但不会从存储/减速器重置状态。

就我而言，由于我使用另一个库进行中央状态管理，因此我的解决方案是在我的商店中创建一个重置函数，并在每次测试开始时调用它。您可以使用我认为更接近用户使用应用程序的相同方法，也可以遵循下一种方法。

在使用 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,
});