Guillaume – (p)repair
Guillaume – (p)repair
PostsComments
NNuxt
Created by Guillaume – (p)repair on 2/11/2025 in #❓・help
Testing a Nuxt application with different profiles
Hello community! I’m new to Nuxt, and I’m currently trying to create a good testing approach for a project I’m working on. I’m using Nuxt (currently 3.11.2), Vitest (3.0.2), @vue/test-utils (2.4.6) and @nuxt/test-utils (3.15.4). To manage roles and permissions, I’m also using a smaller library: nuxt-permissions (0.2.4), which is to add as a module to the nuxt.config.ts like so: 
export default defineNuxtConfig({
 modules: [
   'nuxt-permissions'
   // ...
 ]
})
export default defineNuxtConfig({
 modules: [
   'nuxt-permissions'
   // ...
 ]
})
https://github.com/dystcz/nuxt-permissions I want to run tests with different user profiles. I’m not currently doing true E2E tests, as I am: * mocking my auth middleware to do… nothing * mocking my endpoint response to get a User Then, when a test is running, it goes through all my plugins, and I extended nuxt-permissions with a plugin. I want to test my pages through visiting routes like so: 
import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
import { flushPromises } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import App from '~/app.vue'
import mockedCustomerEndpoints from '../mocks/endpoints/customer'

registerEndpoint('customers', () => (
    mockedCustomerEndpoints.customers()
))

describe('customers page', async () => {
    it('returns a table with values', async () => {
        const wrapper = await mountSuspended(App, { route: '/customers' })

        await flushPromises()

        expect(wrapper.find('table').exists()).toBe(true)
        expect(wrapper.text()).toContain('John')
        […]
    })
})
import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
import { flushPromises } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import App from '~/app.vue'
import mockedCustomerEndpoints from '../mocks/endpoints/customer'

registerEndpoint('customers', () => (
    mockedCustomerEndpoints.customers()
))

describe('customers page', async () => {
    it('returns a table with values', async () => {
        const wrapper = await mountSuspended(App, { route: '/customers' })

        await flushPromises()

        expect(wrapper.find('table').exists()).toBe(true)
        expect(wrapper.text()).toContain('John')
        […]
    })
})
This is working. But what I want to achieve now, is to be able to change my User profile inside my test file, like so: 
const nuxtApp = useNuxtApp()
nuxtApp.provide('authUser', { name: 'user2', role: 'admin' })
const nuxtApp = useNuxtApp()
nuxtApp.provide('authUser', { name: 'user2', role: 'admin' })
I can achieve that, but the bad thing is that the code always go through plugins during initialization phase, so when I provide another authUser, it is too late. Am I in the good direction?
8 replies