VueJS - модульное тестирование с использованием vue-test-utils выдает ошибку - TypeError: _vm.$ T не является функцией

Относительно новичок в Vuejs и тестирование его компонентов. Использование vue-test-utils и jest для тестирования. Получение следующего журнала тестов ошибок

Файл.vue состоит из шаблона, компонента и стиля. Ниже та часть RegistrationLayout.vue, которая получает ошибку -

<style lang="sass">
@import '../stylesheets/colors'
html[path="/signup"], html[path="/login"]
  height: 100%
  background-image: url("../assets/background.jpg")
  background-size: cover
  background-position: center
  background-repeat: no-repeat
  overflow: hidden

  #signup-layout
    #change-language-button
      .lang-menu
        color: $alto

</style>

Тестовый файл -

import Vue from 'vue';
import Vuex from 'vuex'
import SignupLayout from '../src/components/SignupLayout.vue';
import { mount, shallow, createLocalVue } from '@vue/test-utils';

const localVue = createLocalVue()

localVue.use(Vuex)

jest.resetModules()

describe('Signup.test.js', () => {
    let cmp
    let actions
    let store
    let getters
    let state

    beforeEach(() => {


        state = {
            email: 'abc@gmail.com'
        }
 
        getters = {
            CURRENT_USER_EMAIL: state => state.email
        }

        store = new Vuex.Store({
            getters
        })


    })

    it('has received ["Login"] as the title property', () => {
        cmp = shallow(SignupLayout, {
            store,
            localVue,
            propsData: {
                title: ['Login']
            },
            data: {
                email: 'abc@dsf.com'
            }
        })
        cmp.update()
        expect(cmp.vm.title).toEqual(['Login'])
    })


})

Смущенный относительно того, что $t имеет отношение к sass. Любая помощь будет оценена. Застрял здесь на некоторое время сейчас. Дайте мне знать, если понадобится больше деталей. заранее спасибо

Источник

5 ответов

Решение

Ошибка не в <style> тег, потому что Jest скомпилирует ваш компонент Vue и извлечет код JS. Так что вы можете пока игнорировать ошибку строки (я не уверен, как ее исправить).

Но, судя по вашему сообщению об ошибке, проблема связана с использованием vue i18n, и вы упускаете его при объявлении компонента Vue в тестовом файле. Попробуйте добавить эти строки в ваш тестовый файл:

import i18n from 'path-to-your-i18n-file'

// ...

cmp = shallow(SignupLayout, {
  store,
  localVue,
  propsData: {
      title: ['Login']
  },
  data: {
      email: 'abc@dsf.com'
  },
  i18n // <- add the i18n object here
})
Источник 
const $t = () => {}

shallow(Component, {
 mocks:{ $t }
})

Таким образом, вам не нужно загружать всю библиотеку i18n. Вы даже можете следить за функцией с помощью Sinon или jest.fn() если использовать Jest.

Источник

Еще один способ издеваться над библиотекой i18n - смоделировать ее в отдельном js-файле.

import VueTestUtils from '@vue/test-utils';
VueTestUtils.config.mocks.$t = key => key;

и добавить его в конфигурации Jest

 "setupFiles": ["<rootDir>/setup.js"]

так что, если у вас есть больше компонентов с импортом ресурсов, вам не нужно делать это отдельно.

Источник

В настоящее время в Vue 3 вы можете попробовать, в моем случае это помогло:

      import { config } from '@vue/test-utils';

config.global.mocks.$t = phrase => phrase;

потому что

структура конфига на данный момент

Источник

Вы также можете издеваться над ним глобально следующим образом:

      // jest.config.js
{
  // ...
  setupFiles: ['<rootDir>/__tests__/setup.ts'],
}

// __tests__/setup.ts
import Vue, { PluginObject } from 'vue';
import Vuetify from 'vuetify';

const i18nMockPlugin: PluginObject<Vue> = {
  // called by Vue.use(MyPlugin)
  install(Vue) {
    Vue.prototype.$t = function (key: string, _opts: any) {
      return key;
    };
  },
};

Vue.use(Vuetify);
Vue.use(i18nMockPlugin); // mock i18n
Источник
Другие вопросы по тегам