Nuxt3 + Cypress组件测试报错：useI18n未定义及自动导入问题

问题根源在于Cypress默认的cy.mount基于纯Vue环境，而Nuxt3的自动导入API（如useI18n、computed、useSlots）依赖Nuxt的编译注入和上下文环境，直接挂载会导致这些API未定义。以下是解决方法：

1. 安装Nuxt测试工具依赖 #

安装@nuxt/test-utils，它能让Cypress在Nuxt上下文环境中挂载组件：

npm install -D @nuxt/test-utils

2. 替换Cypress的默认mount命令 #

在Cypress的组件测试支持文件（cypress/support/component.js）中，用Nuxt提供的mount函数覆盖默认命令：

import { mount } from '@nuxt/test-utils/vue'

Cypress.Commands.add('mount', (component, options = {}) => {
  return mount(component, options)
})

3. 配置Nuxt测试环境（可选） #

如果组件依赖特定Nuxt模块（如@nuxtjs/i18n），可在nuxt.config.js中配置测试工具的模块支持：

export default defineNuxtConfig({
  // ...其他项目配置
  testUtils: {
    server: true, // 启用服务器环境（按需开启）
    nuxt: {
      modules: ['@nuxtjs/i18n'] // 引入需要的模块
    }
  }
})

4. 编写测试（无需修改原有逻辑） #

现在直接使用原有测试代码即可，cy.mount会自动处理Nuxt的自动导入API：

import SharedModalDefault from "/components/Shared/Modal/SharedModalDefault.vue"

describe('Modal Component Test', () => {
  it('should render a modal with default props', () => {
    cy.mount(SharedModalDefault, {
      props: {
        show: true,
        title: 'Modal Title',
        text: 'Modal Text',
        size: 'xl',
      },
    })

    cy.get('[role="dialog"]').should('exist')
  })
})

可选：按需模拟特定API #

如果需要自定义API行为（比如模拟翻译逻辑），可在挂载时通过global.provide注入：

cy.mount(SharedModalDefault, {
  props: { /* ... */ },
  global: {
    provide: {
      i18n: {
        t: (key) => `[${key}]` // 自定义翻译函数
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者Niek Jansen