渲染中的错误:“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'”[重复]