Testing With React Testing Library

[greenymcgee]

I installed next-safe-action, and all is working well in the browser with an actionClient and the useAction hook. The client-side callbacks are exactly what I was hoping for. The problem is that I don't seem to be able to test the flow starting from the form submission all the way back to my toast that should happen on success or failure through onSuccess or onError supplied through useAction utils. I wrote some logs in the hooks.mjs file temporarily to see them both in the browser and in the test environment. What I found is that executeAsync's .finally runs before await Promise.resolve(onExecute?.({ input })); within useActionCallbacks when in the test environment, but it runs after in the browser. I'm wondering if maybe it's because from the browser it actually hits a server, but in the test environment it doesn't so the execution times aren't a 1:1 match. Has anyone else ran into this?

[greenymcgee]

Oh, I'm using msw to mock responses. The error does get returned in my server action, and the result does include the error I'm expecting. The client-side callbacks just don't ever fire and isExecuting simply turns true and remains true indefinitely.

[francobasilico]

any news with this, I'm having the same issue?

[greenymcgee]

@francobasilico I actually ended up writing my own function that handles this problem and is fully testable and lightweight.

type Callbacks<Result> = {
  onError?: (result: Result) => Promise<void> | void
  onSuccess?: (result: Result) => Promise<void> | void
}

export function withCallbacks<
  Args extends unknown[],
  State extends ActionState,
>(
  serverAction: (...args: Args) => Promise<State>,
  callbacks: Callbacks<State>,
): (...args: Args) => Promise<State> {
  return async (...args: Args) => {
    const promise = serverAction(...args)
    const result = await promise

    if (result?.status === 'success') await callbacks.onSuccess?.(result)

    if (result?.status === 'failure') await callbacks.onError?.(result)

    return promise
  }
}

Here's an example of how I'm using it in one page:

  const callbacks = {
    onError({ message }: State) {
      toast.error(message)
    },
    onSuccess({ responseStatus }: State) {
      toast.success(`${game.name} has been successfully refreshed`)
      if (responseStatus !== 207) return

      onPartialRefreshCallback()
    },
  }

  const [, action, isExecuting] = useActionState(
    withCallbacks(refreshGame, callbacks),
    initialState,
  )

And here's a test of the component that uses the code above:

  it('should toast a success message', async () => {
    render(<RefreshGameForm {...PROPS} />)
    fireEvent.click(screen.getByText('Refresh IGDB Data'))
    await waitFor(() =>
      expect(toastMock.success).toHaveBeenCalledWith(
        `${SUPER_METROID.name} has been successfully refreshed`,
      ),
    )
  })