Как выполнить модульное тестирование компонентов Vue.js, использующих nuxt-i18n

Question

Если я попытаюсь запустить вещь ниже (с yarn run jest), Я получаю TypeError: _vm.$ T не является функцией, потому что SearchField использует перевод ("$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();
  });
});

Если я добавлю следующие три строки в начале, я получу TypeError: Невозможно прочитать свойство '_t' из undefined.

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

Answer 1

nuxt-i18n - это внешняя библиотека, а не ваш собственный код, поэтому передовые практики тестирования требуют от нас просто насмехаться над библиотекой перевода и ее необходимыми функциями ($t в этом случае).

Следующий код должен решить вашу проблему:

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

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

Более подробную информацию об этом подходе можно найти здесь.