Mock api redux 工具包的响应错误对象

Question

我是第一次尝试 [redux 工具包][1]，但没有找到有关如何测试 ui 对 api 调用的响应的有用文档。

我看到 [jest-fetch-mock][2] 建议模拟调用，这些调用有点隐藏在语法糖中。

目前我的代码可以工作，但我找不到一个好的方法来模拟我应该从我的 api 调用中获得的 500 来测试特定场景。这是在我的 RequestList.tsx 文件中调用 api 的方法：

const updateAndRedirect = () => {
    return updateCuration({ state, employeeId })
      .unwrap()
      .then((data) => proceedToLookPage(data.curation.ocpId))
      .catch((e) => {
        const errorMessage = e.data?.error
        if (errorMessage === "Cannot read property 'state' of null") {
          setHasNoRequestsInQueue(true)
        } else {
          setHasError(true)
        }
      })
  }

<Container>
  <Box>
   {error && hasNoRequestsInQueue && (
     message="No new requests to start"
   })
  </Box>


</Container>

测试文件（首选反应测试库）：


   import { fireEvent, getByText, render, waitFor } from '@testing-library/react'
   import { Provider } from 'react-redux'
   import { store } from 'app/store'
   import RequestList from 'scenes/RequestList'
   import fetchMock, { enableFetchMocks } from 'jest-fetch-mock'
   import userEvent from '@testing-library/user-event' 
   
   beforeEach((): void => {
     // enableFetchMocks()
     fetchMock.resetMocks()
   })
   
   
   describe('RequestList', () => {
   it('should render a "no requests in queue" message if the call fails', async () => {
       const { getByText } = render(
         <Provider store={store}>
           <RequestList />
         </Provider>
       )
   
   fetchMock.mockReject(new Error("Cannot read property 'state' of null"))
   
   await waitFor(() => fireEvent.click(getByText(/start new/)))
       await waitFor(
         () => expect(getByText('No new requests to start')).toBeInTheDocument
       )


When I run this test it fails because the error being thrown looks like: 
  

   {
         status: 'FETCH_ERROR',
         error: "Error: Cannot read property 'state' of null"
       }

I want the error to look like: 


{
    status: 500,
    data: {
      error: "Cannot read property 'state' of null"
    }
  }

So that my code declaring the const errorMessage can be run. It is looking for e.data?.error but I can't nest the mocked error message in that shape. 
Since it works locally I believe it is my mock that needs to change.

Any ideas how to mock the response better? Or a different strategy for testing rtk post requests altogether?

 [1]: https://redux-toolkit.js.org/introduction/getting-started
 [2]: https://github.com/wheresrhys/fetch-mock-jest

Answer 1

终于解决了！ jest-fetch-mock 的文档在我看来不是很友好。

即使我试图模拟一个错误，我也需要使用 mockResponse() 函数。

fetchMock.mockResponse( JSON.stringify({ error: "Cannot read property 'state' of null" }), { status: 500 } )

其中 { error: "Cannot read property 'state' of null" } 是网络选项卡中返回的错误消息的正文。

出于某种原因，mockReject() 函数对错误主体的外观进行了假设，这与我的错误外观非常不同。

Mock api redux 工具包的响应错误对象

Mock api response error object for redux toolkit

testing

jest-fetch-mock

redux-toolkit

testing-library