Vitest unhandled error - am i doing error handling correctly ?

[gotson]

Hi !

I am trying to perform some integration tests with Mock Service Worker, where msw will reply with a 401 unauthorized.

I am using OpenAPI fetch, and in particular i am using a Middleware that will throw an Error when the response code is no 2xx (exactly like described in their documentation).

The idea behind that is i want to be able to use Colada's { error } when the server returns a non 2xx status code.

However, when running my test with Vitest, i get an unhandled error / rejection from that test:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: http://localhost:5555/actuator/info: 401 Unauthorized
 ❯ Object.onResponse src/api/komga-client.ts:13:13
 ❯ processTicksAndRejections node:internal/process/task_queues:105:5
 ❯ coreFetch node_modules/openapi-fetch/src/index.js:210:28

This error originated in "src/colada/queries/actuator-info.test.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

My project branch is at https://github.com/gotson/komga/tree/next-ui

• API client with the Middleware to throw on non 2xx
• my Colada query
• the test that shows the unhandled error

I tried changing my Colada query like so:

Index: next-ui/src/colada/queries/actuator-info.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/next-ui/src/colada/queries/actuator-info.ts b/next-ui/src/colada/queries/actuator-info.ts
--- a/next-ui/src/colada/queries/actuator-info.ts	(revision 41ebd3c79eb4f5c787439bf483c2721837862d48)
+++ b/next-ui/src/colada/queries/actuator-info.ts	(date 1749782974529)
@@ -9,7 +9,8 @@
       komgaClient
         .GET('/actuator/info')
         // unwrap the openapi-fetch structure on success
-        .then((res) => res.data as ActuatorInfo),
+        .then((res) => res.data as ActuatorInfo)
+        .catch((x) => x),
     // 1 hour
     staleTime: 60 * 60 * 1000,
     gcTime: false,

With this i don't get the unhandled error, however error will be null, and this part of the test fails:

expect((error.value?.cause as ErrorCause).status).toBe(401)

I suppose i'm doing something wrong with the error handling. How can i achieve the behaviour i want without unhandled errors ?

[posva]

I don’t think the error comes from pinia colada. Otherwise, that would be a bug. Maybe it’s because of the mock with msw? Have you tried removing layers to see?

In your test, the only thing I see I would change is calling the query within the component. So you createColadaMock could take a setup function to execute within the component and expose the content

[gotson]

Thanks for the insights.

I have tried to remove OpenAPI fetch and use a classic fetch like so for the useQuery

query: () =>
      fetch(import.meta.env.VITE_KOMGA_API_URL + '/actuator/info').then((response) => {
        if (!response.ok)
          throw new Error(`${response.url}: ${response.status} ${response.statusText}`, {
            cause: {
              body: response.json(),
              status: response.status,
            },
          })
        else return response.json()
      }),

However i am getting the same behaviour.

I also tried to call my Pinia Colada defined query from inside the mock component as you suggested, but i still get the same result.

Trying something even simpler by removing MSW entirely, if i change the Pinia Colada query to just throw, i get the same unhandled error:

query: () => {
      throw new Error(`fake error`, {
        cause: {
          status: 401,
        },
      })
    },

[posva]

Thanks for the info. I found it's a bug in defineQuery fixed in 3037012 and released

[gotson]

Thanks a lot ! Updated to the latest version and the errors are gone. And thanks to that commit i understand better how to use mount and the setup function.