跳到内容

使用 Vitest 进行 Mocking


官方authjs测试vitest
zoey-kaiser

为了使用 Vitest 运行端到端或组件测试,您需要创建 NuxtAuth 组合式函数的“mock”版本,以便测试与之交互。在某些情况下,如果您在使用 localrefresh 提供程序的全栈应用程序中,您也可以直接与您的身份验证 API 交互,并在您的后端模拟响应。

查看代码

您可以在这里找到本指南的完整代码。

添加您的 mock 函数

首先,在 ~/tests/mocks/auth.ts 中创建由 @sidebase/nuxt-auth 提供的模块函数的 mock 版本。

ts
import { eventHandler } from 'h3'

export const MOCKED_USER = {
  user: {
    role: 'admin',
    email: 'hi@sidebase.io',
    name: 'sidebase'
  }
}

// App-side mocks
export function useAuth() {
  return {
    data: ref(MOCKED_USER),
    status: ref('authenticated'),
    getSession: () => MOCKED_USER,
    signOut: () => {},
  }
}

// Server-side mocks
export const getServerSession = () => MOCKED_USER
export const NuxtAuthHandler = () => eventHandler(() => MOCKED_USER)

在这个文件中,您可以定义您需要在测试中访问的任何 NuxtAuth 组合式函数(客户端或服务端)。稍后当 Vitest 运行时,它将访问这些函数,而不是 NuxtAuth 内置的函数。因此,您可以自定义 MOCKED_USER 以匹配您的会话数据类型。

设置 mock 模块

~/tests/mocks/setup.ts 中,使用上面定义的 mock 函数创建一个新的本地 Nuxt 模块。

ts
import { createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup: (_options, nuxt) => {
    const { resolve } = createResolver(import.meta.url)
    const pathToMocks = resolve('./auth.ts')

    nuxt.hook('imports:extend', (_imports) => {
      _imports.push({ name: 'useAuth', from: pathToMocks })
    })

    nuxt.hook('nitro:config', (nitroConfig) => {
      if (!nitroConfig.alias) {
        throw new Error('Alias must exist at this point, otherwise server-side cannot be mocked')
      }
      nitroConfig.alias['#auth'] = pathToMocks
    })
  },
})

更新您的 nuxt.config.ts

nuxt.config 中,根据环境将 @sidebase/nuxt-auth 或您的 mock 版本导入到 modules 数组中

ts
// If vitest is running the application, overwrite using the mocked module
const mockAuthModule = process.env.VITEST ? ['./test/mocks/setup.ts'] : []

export default defineNuxtConfig({
  modules: [
    '@sidebase/nuxt-auth',
    ...mockAuthModule,
  ],
})

就是这样!您现在可以在您的测试中使用 @sidebase/nuxt-auth 了!我们决定不原生包含模块的 mock 版本,因为它的配置高度依赖于您的设置。

查看代码

您可以在这里找到本指南的完整代码。

根据 MIT 许可证发布。