渲染中的错误:“TypeError:无法读取未定义的属性'_t'”在使用 Jest 的单元测试中

Posted

技术标签:

【中文标题】渲染中的错误:“TypeError:无法读取未定义的属性\'_t\'”在使用 Jest 的单元测试中【英文标题】:Error in render: "TypeError: Cannot read property '_t' of undefined" in Unit Test with Jest渲染中的错误:“TypeError:无法读取未定义的属性'_t'”在使用 Jest 的单元测试中 【发布时间】:2021-06-19 04:11:38 【问题描述】:

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

console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884TypeError:无法读取未定义的属性“_t” 在 Proxy.Vue.$t ([...]\node_modules\vue-i18n\dist\vue-i18n.common.js:194:17) 在 Proxy.render ([...]\src\components\Foo.vue:186:175) 在 [...]

在我的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... ]
    );
  );
);

我使用相同的错误消息检查了所有其他堆栈溢出问题,但单元测试没有导致此错误。 根据 Vue.js 文档,我尝试将一个模拟传递给 _t 的挂载函数,但没有成功:

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

任何提示将不胜感激。

【问题讨论】:

【参考方案1】:

通过讨论这个错误的 Github 问题,我发现 this magic comment by cesalberca

“只要它很浅,它就可以工作。如果你安装组件和任何 子组件使用翻译测试将失败 [...]"

我将mount 替换为shallowMount,现在错误消失了:

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

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

【讨论】:

以上是关于渲染中的错误:“TypeError:无法读取未定义的属性'_t'”在使用 Jest 的单元测试中的主要内容,如果未能解决你的问题,请参考以下文章

渲染中的 Vue.js 错误:“TypeError:无法读取未定义的属性‘长度’”

[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性 'NomeStr'”

Vue警告]:渲染错误:“TypeError:无法读取未定义的属性'map'”Vue Google地图[重复]

我收到一个错误 [Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性‘名称’”

vue计算属性getter错误=> [Vue警告]:渲染错误:“TypeError:无法读取未定义的属性'periodNum'”[重复]

Vue路由器错误:TypeError:无法读取未定义的属性“匹配”