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

我们一直在使用React钩子

useReducer

和

useContext

来处理React应用程序中的全局存储

当使用react测试库运行测试时，我们注意到，一旦我们的状态在一个测试中更改，接下来的所有测试现在都会更改该状态

我们尝试在每次（清理）之后使用

进行清理，但没有成功

不知道发生了什么事

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
  })
})

import React，{useContext，useReducer}来自“React”
从'@testing library/react'导入{render，firevent}
导入“@testing library/jest dom/extend expect”
从“/TODOLIST”导入TODOLIST
从“../../reducers/reducer”导入reducer
从“../../context”导入存储
从“../../tests/fixtures”导入设备
函数组件（）{
常量[状态，调度]=用户导出器（减速器，夹具）
返回(
)
}
描述（‘待办事项’，（）=>{
它（'按下按钮时删除todo'，（）=>{
常量{getByTestId，getAllByText}=render（）
expect（getAllByText（'Delete'）.length）.toBe（3）
window.confirm=jest.fn（）.mockImplementation（（）=>true）
firevent.click（getByTestId（'delete-1'））
expect（window.confirm）.toHaveBeenCalled（）
expect（getAllByText（'Delete'）.length）.toBe（2）
})
它（'检查第一次测试是否不影响此测试'，（）=>{
常量{getByTestId，getAllByText}=render（）
expect（getAllByText（'Delete'）.length.toBe（3）//此操作失败，为2
})
})
我遇到了同样的问题，我得出的结论是
cleanup
卸载与渲染一起装载的树，但不会从存储/还原器重置状态

在我的例子中，因为我正在使用另一个库进行中央状态管理，所以我的解决方案是在我的存储中创建一个重置函数，并在每个测试开始时调用它。你可以使用我认为更接近用户使用应用程序的方法，也可以使用下一种方法

在关于使用Redux的官方建议中，他们建议重新创建自己的渲染功能并为其提供存储

函数渲染(
ui，
{
初始状态=还原初始状态，
store=createStore（减速器，初始状态），
…渲染
} = {}
) {
函数包装器（{children}）{
返回{children}
}
返回rtlRender（ui，{wrapper:wrapper，…renderOptions}）
}
//转口一切
从“@testing library/react”导出*

//在您的测试中
const store=createStore（（）=>（{count:1000}））
渲染（{
商店，
});