I have a vue 3 project with typescript. I used vue-i18n for localization and for test, I use vitest. When I want to render components in test that have i18n, got this error:
How can I fix it?
TypeError: _ctx.$t is not a function
❯ Proxy._sfc_render src/components/loader/AppLoader.vue:11:52
9| </div>
10| <div v-else-if="isEmpty">
11| <span class="text-gray-500 text-lg block">{{ $t('message.empty') }}</span>
| ^
12| </div>
13| </div
I had the same issue. I am new to vitest
and vue/test-utils
.
I found a solution, here: https://blog.albert.do/quasar-unit-test-with-vitest-i18n-and-the-t-method/
My issue goes away if I mount
my component like so:
const wrapper = mount(MyComponent, {
global: {
mocks: {
$t: (msg) => msg
}
}
});
This installs a little function $t
which just returns the message it gets, untranslated.
With that, testing translation is impossible, but testing if literal translation strings are present, is handy.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With