Nuxt•4w ago

404 path not found in unit test

I am testing a pinia store with persistedStatePlugin in Nuxt env and tests are running green, but I get always this error: 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. FetchError: [POST] "/api/basket/update": 404 Cannot find any path matching /api/basket/update. I already registerEndpoint:

registerEndpoint('/api/basket/update', {
  method: 'POST', handler: (event) => {
    return ({
      items: [],
      basketId: '123',
    })
  },
})

registerEndpoint('/api/basket/update', {
  method: 'POST', handler: (event) => {
    return ({
      items: [],
      basketId: '123',
    })
  },
})

14 Replies

kapa.ai•4w ago

Hi @Karl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain explicit information about handling or mocking API endpoints like /api/basket/update in unit tests for a Pinia store with persistedStatePlugin in a Nuxt environment. There is also no mention of the registerEndpoint utility or how to ensure that mocked endpoints are correctly recognized by Vitest or Nuxt's test environment. If you are encountering a 404 error for a mocked endpoint during testing, it may be due to the test environment not properly intercepting or registering the endpoint, but the knowledge sources do not provide a solution or guidance for this specific scenario. If you need more detailed help, please provide additional context or consult the official Nuxt or Vitest documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@672769571429548033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KarlOP•4w ago

this is the function causing the issue: async function fn(basketItems: BasketItem[], locale: FullLocale): Promise<EnrichedBasketItem[] | BasketItem[]> { // validate and enrich basket using backend service const basketResponse = await $fetch('/api/basket/update', { method: 'POST', body: { locale: locale, items: basketItems, }, parseResponse: text => JSON.parse(text, dateReviver), }) return basketResponse.items as unknown as EnrichedBasketItem[] } @kapa.ai any idea?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, there is no explicit documentation or example addressing the specific issue of 404 errors for mocked API endpoints (like /api/basket/update) in unit tests for a Pinia store with persistedStatePlugin in a Nuxt environment. The sources do discuss related topics such as configuring Vitest projects for Nuxt, mocking composables and auto-imports, and handling server middleware, but none directly cover the use of registerEndpoint or troubleshooting 404 errors in this context. If you are using a utility like registerEndpoint, ensure it is compatible with your test environment and is being called before your tests run. However, since the knowledge sources do not mention this utility or provide a recommended approach for endpoint mocking in Nuxt unit tests, I cannot provide a definitive solution. I'm sorry, but the knowledge sources do not contain enough information to answer your question with confidence. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@672769571429548033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KarlOP•4w ago

@kapa.ai handle it as generic error, not specific to this route

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not provide explicit details on how to generically handle 404 errors for API routes in unit tests within a Nuxt environment. However, a general approach—based on Nuxt and common testing practices—is to catch errors from failed fetch or API calls and handle them in a centralized error handler, rather than writing route-specific logic. For example, you can catch errors in your store actions or composables and process them based on their status code:

try {
  // your API call, e.g. useFetch or $fetch
} catch (error) {
  if (error.statusCode === 404) {
    // Handle as a generic "not found" error
    // e.g., set a generic error state or message
  } else {
    // Handle other errors
  }
}

try {
  // your API call, e.g. useFetch or $fetch
} catch (error) {
  if (error.statusCode === 404) {
    // Handle as a generic "not found" error
    // e.g., set a generic error state or message
  } else {
    // Handle other errors
  }
}

If you want to handle all errors (including 404) generically, you can omit the status code check and simply process all errors in the same way. Since the knowledge sources do not provide a direct example or recommended pattern for this scenario, please consider this a general suggestion based on standard Nuxt and JavaScript error handling patterns. If you need a more Nuxt-specific or test-environment-specific solution, you may need to consult the official documentation or provide more context. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@672769571429548033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KarlOP•4w ago

there must be a way to mock $fetch requests without getting a 404! @kapa.ai there must be a way to mock $fetch requests without getting a 404!

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly document a built-in or recommended way to mock $fetch requests in Nuxt unit tests to avoid 404 errors. However, there are related examples for mocking composables and auto-imported functions in Vitest using mockNuxtImport, which is the preferred approach for mocking Nuxt auto-imports in tests. For example, to mock a composable like useSupabaseClient, you can use:

import { mockNuxtImport } from 'nuxt-vitest/utils'

mockNuxtImport('useSupabaseClient', () => {
  return () => ({
    // mocked implementation
  })
})

import { mockNuxtImport } from 'nuxt-vitest/utils'

mockNuxtImport('useSupabaseClient', () => {
  return () => ({
    // mocked implementation
  })
})

How to mock Supabase in Vitest? While there is no direct example for $fetch, you could try a similar approach by mocking $fetch using mockNuxtImport:

import { mockNuxtImport } from 'nuxt-vitest/utils'

mockNuxtImport('$fetch', () => {
  return async (url, options) => {
    // Return mocked data based on url/options
    return { items: [], basketId: '123' }
  }
})

import { mockNuxtImport } from 'nuxt-vitest/utils'

mockNuxtImport('$fetch', () => {
  return async (url, options) => {
    // Return mocked data based on url/options
    return { items: [], basketId: '123' }
  }
})

This should intercept $fetch calls in your tests and prevent 404 errors, as the real network request will not be made. If this approach does not work for your setup, the knowledge sources do not provide further details or alternatives. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@672769571429548033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KarlOP•4w ago

any idea why import { registerEndpoint } from '@nuxt/test-utils/runtime' registerEndpoint('/test/', { method: 'POST', handler: () => ({ test: 'test-field' }), }) is not working? @kapa.ai

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain any explicit information about the registerEndpoint function from @nuxt/test-utils/runtime, its usage, or troubleshooting why it might not work as expected. There are no examples or documentation in the provided sources that confirm how registerEndpoint should be used or integrated with Nuxt's test environment. If registerEndpoint is not working, it could be due to a misconfiguration, an unsupported test environment, or a version mismatch, but the knowledge sources do not provide enough detail to confirm or troubleshoot this. You may want to consult the official Nuxt Test Utils documentation or open an issue on the Nuxt repository for more targeted support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@672769571429548033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

404 path not found in unit test

Did you find this page helpful?