web-dev-qa-db-ja.com

VueJS-vue-test-utilsを使用したユニットテストでエラーが発生する-TypeError：_vm。$ tは​​関数ではありません

Vuejsは比較的新しく、そのコンポーネントをテストしています。テストにvue-test-utilsとjestを使用します。次のエラーを取得しています テストログ

.vueファイルは、テンプレート、コンポーネント、およびスタイルで構成されます。以下は、エラーが発生するSignupLayout.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: '[email protected]'
        }
 
        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: '[email protected]'
            }
        })
        cmp.update()
        expect(cmp.vm.title).toEqual(['Login'])
    })


})

$ tがsassとどう関係しているのか混乱しています。任意の助けいただければ幸いです。しばらくここで立ち往生しています。詳細が必要な場合はお知らせください。前もって感謝します

vue.jssassjestjsbabel-jestvue-test-utils
8
Karan Rao

JestがVueコンポーネントをコンパイルしてJSコードを抽出するため、エラーは<style>タグに含まれていません。したがって、今のところ行エラーを無視できます（わかりません）それを修正する方法）。

しかし、あなたのエラーメッセージに基づいて、問題は vue i18n の使用に関連しているようであり、テストファイルでVueコンポーネントを宣言するときにそれが欠落しています。次の行をテストファイルに追加してみてください。

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

// ...

cmp = shallow(SignupLayout, {
  store,
  localVue,
  propsData: {
      title: ['Login']
  },
  data: {
      email: '[email protected]'
  },
  i18n // <- add the i18n object here
})
2
daniloisr
_const $t = () => {}

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

これにより、i18nライブラリ全体をロードする必要がなくなります。 Jestを使用している場合は、Sinonまたはjest.fn()を使用して関数をスパイすることもできます。

5
Dobromir Hristov

I18nライブラリをモックする別の方法は、別のjsファイルにモックすることです

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

そしてそれをJest構成に追加します

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

したがって、リソースをインポートするコンポーネントが多い場合は、個別にモックする必要はありません。

1
Tony Tom