Vue项目中Cypress组件测试集成vue-i18n报错的解决求助

问题根源 #

在Cypress组件测试环境中，每个cy.mount都会创建一个独立的Vue应用实例，默认不会加载项目中的vue-i18n插件。你的useLocaleStore中调用了useI18n，但测试环境未安装i18n，因此抛出该错误。

解决方案 #

需要在测试环境中手动将vue-i18n插件注入到Cypress的Vue应用实例中，有两种方式可选：

方式一：全局配置（所有测试生效）

修改cypress/support/component.ts，在现有Pinia配置的基础上添加vue-i18n的全局注入：

import { createPinia, setActivePinia } from 'pinia';
import { createI18n } from 'vue-i18n';
import { mount } from 'cypress/vue';

// 1. 初始化i18n（可直接导入项目中已有的i18n配置，避免重复写messages）
const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: {
      loading: 'Loading...'
    },
    // 可添加项目中其他语言的翻译
  }
});

// 2. 全局注册Pinia和i18n插件
Cypress.Commands.overwrite('mount', (originalMount, component, options = {}) => {
  options.global = options.global || {};
  options.global.plugins = options.global.plugins || [];

  // 添加Pinia
  const pinia = createPinia();
  setActivePinia(pinia);
  options.global.plugins.push(pinia);

  // 添加vue-i18n
  options.global.plugins.push(i18n);

  return originalMount(component, options);
});

方式二：单个测试文件配置（仅当前测试生效）

如果只需要在特定组件测试中启用i18n，可直接在测试文件中配置：

import LoadingSpinner from "../../src/components/ui/LoadingSpinner.vue";
import { createI18n } from 'vue-i18n';
import { createPinia, setActivePinia } from 'pinia';

// 初始化i18n（同样可导入项目已有配置）
const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: {
      loading: 'Loading...'
    }
  }
});

describe("LoadingSpinner", () => {
  beforeEach(() => {
    // 激活Pinia
    setActivePinia(createPinia());
  });

  it("renders", () => {
    cy.mount(LoadingSpinner, {
      global: {
        plugins: [i18n] // 将i18n注入测试应用
      }
    });
  });
});

关键说明 #

• 如果项目中已有单独的i18n配置文件（比如src/i18n.ts），直接导入该文件的i18n实例即可，无需重复编写messages，保证测试与项目配置一致。
• 两种方式的核心都是让Cypress创建的测试Vue应用实例安装vue-i18n插件，满足useI18n的调用条件。

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