I spent hours troubleshooting a unit test for my Vue.js component, but no matter how much I searched the internet, I kept encountering this error:
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 [...]
In Foo.vue, I utilize $t provided by the vue-i18n plugin like this:
<template>
<b-form-group :label="$t('foo.label')">
[...]
</b-form-group>
</template>
This is what my Foo.spec.ts file looks like:
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... ]
});
});
});
Despite checking numerous similar Stack Overflow issues related to this error message, none of them seem to apply to my unit test scenario.
Following Vue.js documentation, I attempted to pass a mock into the mount function for _t, but unfortunately, it did not resolve the issue:
const $mocks = { $t: () => {} };
const wrapper = mount(Foo, { localVue, mocks: { $mocks } }) as any;
If anyone has any insights or suggestions to offer, they would be greatly appreciated.