"Actions must be plain objects. Use custom middleware for async actions" / React Testing Library / RTL / redux createAsyncThunk

Question

Fellows, I read this topic but still didn't get it how to apply the solution on my code since I am using a middleware. Tried so many things but still didn't get it, keep receiving this message when test try to render the component.

test.js

  it("should redirect to envio-de-documentos page when upload button is clicked and step belongs to checklist 1 phase", async () => {
    await act(async () => {
      renderComponent(
        <ProposalActions // Error happens here
          isDocumentsLoading={false}
          state={ENVIO_DOCS_IMOVEL_03}
          objectName="re_financing_simulator_proposal_status_pre_proposal_sent"
          tracking={() => {}}
          id={123456}
        />
      )
    })

    fireEvent.click(
      screen.getByText("Enviar Documentos", {
        selector: "button",
        exact: false,
      })
    )

    await waitFor(() =>
      expect(navigate).toHaveBeenCalledWith(routes.UPLOAD_DOCUMENTS_PAGE)
    )
  })

return from the component I'm rendering (ProposalActions.js)

return (
    <Container>
      <UploadDocuments
        fluid
        label={buttonStatus.label}
        icon={buttonStatus.icon}
        onClick={() => {
          dispatch(startDocumentsUpload({ id, step })) // <-- Error is happening here
          if (
            objectName ===
            "re_financing_simulator_proposal_status_pre_proposal_approved"
          )
            tracking.send("click", "btn_send_docs")
        }}
        isLoading={isDocumentsLoading}
      />
    </Container>
  )

actions.js - where startDocumentsUpload lives

export const startDocumentsUpload = createAsyncThunk(
  "proposal/startDocumentsUpload",
  async ({ id, step }, { dispatch }) => dispatch(fetchDocuments({ id, step }))
)

actions.js - where fetchDocuments lives as well

export const fetchDocuments = createAsyncThunk(
  "proposal/fetchDocuments",
  ({ id, step }) => api.getProposalDocuments(id, step),
  { condition: id => !!id, dispatchConditionRejection: true }
)

Then in my reducer.js I have a fetchDocuments.pending, fetchDocuments.rejected, and fetchDocuments.fulfilled.

Now back to startDocumentsUpload action, when it's fulfilled I have this:

  builder.addCase(startDocumentsUpload.fulfilled, (state, { payload }) => {
    const target =
      payload.meta.arg.step === 1
        ? routes.UPLOAD_DOCUMENTS_PAGE
        : routes.LEGAL_ASSESSMENT_PAGE
    state.currentPath = navigate(
      `${target}?id=${payload.id}`,
      state.currentPath
    )
  })

So this redirect/navigation to routes.UPLOAD_DOCUMENTS_PAGE is what I'm trying to test.

I know this code is quite confusing, I inherited this and I'm still trying to understand what's happening :( Please help

It's really hard to debug, without having the see the code in action, what you can do is try to reproduce your issue with least code by mimicking it.then, community might be able to help. My wild guess is you are dispatching function/promise and you need a dispatch function which should be passed along ``` const fetchData = () => async ( dispatch ) => { try { dispatch({ type: INIT }); await AXIOS .get(`x`) .then((response) => dispatch({ type: DASHBOARD_SUCCESS, payload: response, }) ); } }; ``` — Shubham soni, Jan 09 '22 at 17:50
Thanks @Shubhamsoni , I'll try to do this to it make easier to help — Elen Araujo, Jan 09 '22 at 18:01
The error means you are using a store without the thunk middleware for testing. Are you not using your real Redux store for the tests? — phry, Jan 09 '22 at 18:05
Oh my... Yes, I'm using mockstore https://gist.github.com/elenaraujo/51d430b61fea6ca83b3203f649945c11 I have this `createStore.js` but don't know how to use it on tests. @phry — Elen Araujo, Jan 09 '22 at 18:40
Just import that createStore default export into your tests and execute the method there for each test to have a new store in each test. Use your real Redux store, not some mock store. — phry, Jan 09 '22 at 19:18

score 0 · Answer 1 · answered Jan 09 '22 at 21:55

As @phry noticed, I wasn't using my real Redux Store but a mockstore. It works now I'm not using a mock anymore. I found this https://medium.com/@lucksp_22012/dont-use-mock-store-use-your-real-store-b319d7e4e22e that might be useful to others as well.

"Actions must be plain objects. Use custom middleware for async actions" / React Testing Library / RTL / redux createAsyncThunk

1 Answers1