如何使用 RTL 来 JEST 测试带有使用 ajax 和状态的内部钩子的组件？

Question

问题是我们的 jest 在 jsdom 中运行并且已经很老了，但最终每当我编写如下所示的函数时，当我尝试在组件中使用它时，jest 无法处理它。加载状态保持为 true...当我将其包装在 console.logs 中时，我看到表状态从未更新，加载保持为 true。

就像我必须模拟 tableState/Dispatch，但它是正在测试的组件的内部，因此无法在不被迫从视图中解除数据关联的情况下发送模拟。这对于延迟加载和道具传递问题可能会有点适得其反，所以尽量避免提起钩子。

    const useTableDataBackend = (
          dataInit,
          RequestHandler = (OnSuccess, onError) => {},
          MutationHandler = (data, timezone) => {}
        ) => {
    
          const [tableState, tableDispatch] = useReducer(
            dataInit
          )
        
          const { headers, filters, rowsPerPage, currentPage } = tableState
        
          const getPageRequestHandler = (resetPage = true) => {
            tableDispatch({ type: 'SET_LOADING', payload: true })
        
            RequestHandler(
              (data) => {
                tableDispatch({ type: 'SET_LOADING', payload: false })
              },
              () => {
                tableDispatch({ type: 'SET_LOADING', payload: false })
              }
            )

            useEffect(() => {
              tableDispatch({ type: 'SET_DATA', payload: dataInit })
              tableDispatch({ type: 'SET_DATA_PAGINATED', payload: dataInit })
            }, [dataInit])

            useEffect(() => {
                getPageRequestHandler(false)
            }, [currentPage])
          }

使用案例：

const myComponent = () => {
  const RequestHandler = () => {
    // Implementation here
  }

  const MutationHandler = () => {
    // Implementation here
  }

  const { tableState, tableDispatch } = useTableDataBackend(
    MutationHandler(RequestHandler()),
    RequestHandler,
    MutationHandler
  )

  return (
    <div>{tableState}</div>
  )
}

测试用例：

jest.mock(
  'RequestHandler',
  () => jest.fn()
)

  it('should paginate correctly onClick of each control', () => {
    RequestHandler.mockImplementationOnce(
      (OnSuccess, onError) => {
        //const data = Array.from({ length: 5 }, () => EncountersGetRequestHandlerSampleData.items.data[0])
        onSuccess(data)
      }
    )
    render(<myComponent />)
    // Expect loading to stop but never does, can't test a disabled paginator
  })

Answer 1

您的问题在这里：

RequestHandler.mockImplementationOnce(
  (OnSuccess, onError) => {
    //const data = Array.from({ length: 5 }, () => EncountersGetRequestHandlerSampleData.items.data[0])
    onSuccess(data)
  }
)

更改为：

RequestHandler.mockImplementation(
  (OnSuccess, onError) => {
    //const data = Array.from({ length: 5 }, () => EncountersGetRequestHandlerSampleData.items.data[0])
    onSuccess(data)
  }

如果被模拟的函数需要多次调用才能达到预期状态，mockImplementationOnce 显然不起作用。

）