Error in render: "TypeError: Cannot read property '_t' of undefined" in Unit Test with Jest

Question

我为我的 Vue.js 组件编写了一个单元测试，但在尝试和搜索互联网数小时后，我仍然不断收到此错误：

console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
TypeError: Cannot read property '_t' of undefined
at Proxy.Vue.$t ([...]\node_modules\vue-i18n\dist\vue-i18n.common.js:194:17)
at Proxy.render ([...]\src\components\Foo.vue:186:175)
at [...]

在我的 Foo.vue 组件中，我像这样使用 $t，它由 vue-i18n 插件提供：

<template>
  <b-form-group :label="$t('foo.label')">
    [...]
  </b-form-group>
</template>

我的 Foo.spec.ts 看起来像这样：

import { createLocalVue, shallowMount, mount } from "@vue/test-utils";
import Foo from "@/components/Foo.vue";
import { i18n } from "@/i18n";

describe("Foo", () => {
  const localVue = createLocalVue() as any;
  localVue.use(i18n);
  
  const wrapper = mount(Foo, { localVue } ) as any;

  describe("removeLabel", () => {  
    it("should remove label", async () => {
      // Arrange
      const index = 1;

      // Act
      wrapper.vm.removeLabel(index);

      // Assert
      expect(wrapper.isVueInstance()).toBeTruthy();
      // [more expectations... ]
    });
  });
});

我检查了所有其他具有相同错误消息的 Stack Overflow 问题，但在 none 中，单元测试导致了此错误。
根据 Vue.js 文档，我尝试将模拟传递给 _t 的挂载函数，但没有成功：

const $mocks = { $t: () => {} };
const wrapper = mount(Foo, { localVue, mocks: { $mocks } }) as any;

如有任何提示，我们将不胜感激。

Answer 1

通过 Github 问题讨论那个错误，我发现 this magic comment cesalberca:

"This works as long as it's shallow. If you mount the component and any subcomponent uses translations the tests will fail [...]"

我用 shallowMount 替换了 mount，现在错误消失了：

// const wrapper = mount(Foo, { localVue, mocks: { $t: () => {} } }) as any;

const wrapper = shallowMount(Foo, { localVue, mocks: { $t: () => {} } }) as any;

Error in render: "TypeError: Cannot read property '_t' of undefined" in Unit Test with Jest

Error in render: "TypeError: Cannot read property '_t' of undefined" in Unit Test with Jest

unit-testing

typescript

vue.js

jestjs

vue-i18n