如何同时Mock Pinia与vue-i18n？Vue3测试问题求助

问题场景 #

使用Vue3 Composition API开发项目，组件同时集成vue-i18n的useI18n和Pinia的useStore。在testSetup.ts中全局Mock vue-i18n后，单独测试组件功能正常，但在Component.test.ts中添加createTestingPinia配置Mock Pinia后，vue-i18n的Mock失效，抛出错误TypeError: $setup.t is not a function。尝试过config.global.mocks和config.global.plugins两种方式Mock vue-i18n，均在添加Pinia Mock后失效，怀疑是@pinia/testing重置了config.global。

原因分析 #

1. 你使用的@pinia/testing版本（0.0.16）属于早期测试版本，存在配置兼容性问题，会干扰Vue测试工具的全局配置，导致vue-i18n的全局Mock被意外覆盖。
2. Vitest的vi.mock与Pinia测试插件的初始化顺序可能存在冲突，全局Mock的优先级被Pinia配置覆盖。

解决方案 #

方案一：升级@pinia/testing到稳定版本 #

早期版本的@pinia/testing存在较多bug，升级到最新稳定版（建议>=0.2.0）可解决大部分配置冲突问题。修改package.json中的依赖版本：

"@pinia/testing": "^0.2.0"

然后执行依赖安装命令更新：

npm install
# 或
yarn install

方案二：在测试文件中显式Mock vue-i18n #

放弃依赖全局的testSetup.ts，在组件测试文件中直接显式Mock vue-i18n，确保Mock逻辑在Pinia配置前执行，避免被干扰。修改后的Component.test.ts示例：

import { it, expect, vi } from 'vitest';
import { mount} from '@vue/test-utils';
import { createTestingPinia } from '@pinia/testing';
import Component from './Component.vue';

// 显式Mock vue-i18n，确保优先级高于Pinia配置
vi.mock('vue-i18n', () => ({
  useI18n: () => ({
    t: (key: string) => key,
    d: (key: string) => key,
  }),
}));

const options = {
  global: {
    plugins: [
      createTestingPinia({
        createSpy: vi.fn(),
        initialState: {
          // 注意：initialState需要对应store的ID（你的store ID是'store'）
          store: {
            isLoading: false
          },
        },
      }),
    ],
  },
};

it('组件渲染正常，t函数与Pinia状态均生效', () => {
  const wrapper = mount(Component, options);
  expect(wrapper.text()).toContain('init'); // 验证t('init')返回key本身
  expect(wrapper.text()).toContain('Loading: No'); // 验证Pinia初始状态生效
});

方案三：调整全局Mock的执行顺序 #

如果坚持使用全局的testSetup.ts，确保它在所有Pinia相关导入前被加载。修改Component.test.ts的导入顺序：

// 先导入全局Mock配置
import './testSetup.ts';
// 再导入其他测试依赖和组件
import { it, expect, vi } from 'vitest';
import { mount} from '@vue/test-utils';
import { createTestingPinia } from '@pinia/testing';
import Component from './Component.vue';

// 后续测试代码...

注意事项 #

• 配置Pinia的initialState时，必须将状态放在对应store ID的对象下（比如你的store ID是store，状态就放在store属性中），否则初始状态不会生效。
• 若使用config.global.mocks来Mock$t方法，需确保该配置与Pinia插件同时存在于global对象中，不会被覆盖：

const options = {
  global: {
    plugins: [createTestingPinia(/* 配置 */)],
    mocks: {
      $t: (key) => key
    }
  }
};

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