How to test Middleware in Nuxt?

Hacktheblues · 2025-12-05T15:54:38.542Z

I am using vitest and testing-library/vue for testing but I don't know how to test a middleware in Nuxt.

K

kapa.ai•12/5/25, 3:54 PM

Hi @Hacktheblues. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•12/5/25, 3:55 PM

----------------------
The knowledge sources you provided don’t contain a direct, documented pattern or example specifically about testing Nuxt route middleware with Vitest or @testing-library/vue, so I can’t give you a fully authoritative, step‑by‑step recipe.

What is covered is:

How middleware behaves and common pitfalls (e.g. infinite redirects when you
```
navigateTo(to.fullPath)
```
navigateTo(to.fullPath)
```
navigateTo(to.fullPath)
```
navigateTo(to.fullPath)
instead of just letting the middleware continue). [Nuxt 3 middleware]
General Nuxt testing guidance: use
```
@nuxt/test-utils
```
@nuxt/test-utils
```
@nuxt/test-utils
```
@nuxt/test-utils
with Vitest “projects” to get a proper Nuxt runtime environment in tests. [Vitest projects docs; Testing environments]
How to mock Nuxt auto‑imports and composables in Vitest using
```
mockNuxtImport
```
mockNuxtImport
```
mockNuxtImport
```
mockNuxtImport
, and how to run component/composable tests in a Nuxt environment via
```
@nuxt/test-utils
```
@nuxt/test-utils
```
@nuxt/test-utils
```
@nuxt/test-utils
. [mockNuxtImport example; Nuxt Test Utils primer]

Putting that together, the supported way to test middleware in Nuxt (inferred from these docs, but not shown explicitly) is:

Use Nuxt’s test environment
Configure Vitest with a Nuxt project using
```
defineVitestProject
```
defineVitestProject
```
defineVitestProject
```
defineVitestProject
so your tests run with Nuxt’s runtime (auto‑imports, router, etc.). [Vitest projects docs; Alias imports in tests]

K

kapa.ai•12/5/25, 3:55 PM

**Import and call the middleware function directly** A route middleware is just a function created by `defineNuxtRouteMiddleware((to, from) => { ... })`. In a Nuxt‑environment test you can import that file (e.g. `import auth from '~/middleware/auth'`) and call it with mocked `to`/`from` route objects, then assert:
- it returns
```
undefined
```
```
undefined
```
  (continues navigation), or
- it returns
```
navigateTo('/login')
```
  navigateTo('/login')
```
navigateTo('/login')
```
  navigateTo('/login')
  (redirect), etc.
  The infinite‑redirect example shows that returning nothing vs. returning
```
navigateTo
```
  navigateTo
```
navigateTo
```
  navigateTo
  is the key observable behavior. [Nuxt 3 middleware]
**Mock any composables used inside the middleware** If your middleware uses things like `useUserStore`, `useState`, or other auto‑imports, you can mock them with `mockNuxtImport` from the Nuxt Vitest utilities, similar to how `useHead` is mocked in composable tests. [[mockNuxtImport example](<https://stackoverflow.com/questions/77009495>); [Nuxt Test Utils primer](<https://www.youtube.com/watch?v=yGzwk9xi9gU>)]
**Optionally test via a page + navigation** With `@nuxt/test-utils/e2e` you can spin up a Nuxt app and use a browser (e.g. Playwright) to navigate to a page that uses your middleware and assert that you end up on the expected route (protected page vs. `/login`). The docs emphasize using the Nuxt E2E helpers for hydrated navigation tests, but they don’t show a concrete middleware example. [[Testing environments](<https://github.com/nuxt/nuxt/pull/32963>); [Nuxt Test Utils primer](<https://www.youtube.com/watch?v=yGzwk9xi9gU>)]

Because there’s no explicit “here is how to test middleware” snippet in the sources, I can’t provide a concrete code sample that’s guaranteed to match Nuxt’s official docs. If you need exact code, I’d recommend:

K

kapa.ai•12/5/25, 3:55 PM

Checking the official Nuxt testing docs for an updated middleware example.
Or opening an issue/discussion on
```
nuxt/test-utils
```
nuxt/test-utils
```
nuxt/test-utils
```
nuxt/test-utils
asking for a documented pattern for route‑middleware tests.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•12/5/25, 3:55 PM

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

D

dwol•12/5/25, 4:58 PM

import { describe, expect, it } from 'vitest'
import middleware from 'path-to-middleware'

describe('title', () => {
  it('should do stuff', async () => {
    
    const mockToRoute = {route info}
    const mockFromRoute = {route info}

    await middleware(mockToRoute, mockFromRoute)

    expect(assertions).toBe(true)
  })
})

import { describe, expect, it } from 'vitest'
import middleware from 'path-to-middleware'

describe('title', () => {
  it('should do stuff', async () => {
    
    const mockToRoute = {route info}
    const mockFromRoute = {route info}

    await middleware(mockToRoute, mockFromRoute)

    expect(assertions).toBe(true)
  })
})

import { describe, expect, it } from 'vitest'
import middleware from 'path-to-middleware'

describe('title', () => {
  it('should do stuff', async () => {
    
    const mockToRoute = {route info}
    const mockFromRoute = {route info}

    await middleware(mockToRoute, mockFromRoute)

    expect(assertions).toBe(true)
  })
})

import { describe, expect, it } from 'vitest'
import middleware from 'path-to-middleware'

describe('title', () => {
  it('should do stuff', async () => {
    
    const mockToRoute = {route info}
    const mockFromRoute = {route info}

    await middleware(mockToRoute, mockFromRoute)

    expect(assertions).toBe(true)
  })
})

How to test Middleware in Nuxt?

Similar Threads

Similar Threads

Similar Threads