How to unit test Vue.js components that use nuxt-i18n

Question

If I try to run the thing below (with yarn run jest), I get TypeError: _vm.$t is not a function, because SearchField is using a translation ("$t('search')").

import { mount } from "@vue/test-utils";
import SearchField from "@/components/ui/SearchField";

describe("SearchField", () => {
  const wrapper = mount(SearchField);

  it("renders correctly", () => {
    expect(wrapper.element).toMatchSnapshot();
  });
});

If I add the following three lines at the beginning, I get TypeError: Cannot read property '_t' of undefined instead.

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

Answer 1

nuxt-i18n is an external library, not your own code, so the test good practices ask us to just mock the translation library and its needed functions ($t in this case).

The following code should solve your problem:

describe("SearchField", () => {
  const wrapper = mount(SearchField);

  it("renders correctly", () => {
    mocks: {
      $t: (msg) => msg
    }
    expect(wrapper.element).toMatchSnapshot();
  });
});

More information on this approach can be found here.