Vue3组合式API全局Mock vue-i18n的t函数解决测试警告

我正在使用Jest、vue-test-utils和Vue3（组合式API），想要全局模拟vue-i18n的t('key')函数。在选项式API中，只需在jest.init.js里配置config.global.mocks就能实现，但使用组合式API的const { t } = useI18n()时，尝试了部分Mock vue-i18n模块的方法后，运行测试仍出现Vue警告：

console.warn [Vue warn]: Property "t" was accessed during render but is not defined on instance.

已参考相关帖子但未能解决问题，附上i18n配置及组件代码，寻求解决办法。

解决方案 #

在Jest初始化文件中添加以下代码，采用部分Mock模块的方式实现全局模拟。注意：如果测试中使用jest.resetAllMocks()会重置此Mock导致失效，这种情况下建议改用在单个测试文件中单独配置Mock的方案。

// jest.init.js
import { createI18n, useI18n } from "vue-i18n";

jest.mock("vue-i18n", () => {
  return {
    ...jest.requireActual("vue-i18n"),
    useI18n: jest.fn().mockReturnValue({
      t: (key) => key,
    }),
  };
});

附配置及组件代码 #

i18n配置 #

const i18n = createI18n({
  legacy: false, 
  messages, // 设置本地化消息
  // 其他选项
});

export { i18n };

组件代码 #

<template>
  <p>{{ t("foo.bar.route.description") }}</p>
</template>

<script>
import { useI18n } from "vue-i18n";

export default {
  name: "Foo",
  setup() {
    const { t } = useI18n();

    return {
      t,
    };
  },
};
</script>

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