投稿日:

jest で vue のコンポーネントのメソッドをテストしたいが呼び出せない

jest 27.4.3
vue/test-utils 1.3.0
vue 2.5.2

すみませんが、jest 初心者です。

初心者らしく、初心者がハマりそうなポイントを書いておきます。

TimeTable.vue　というコンポーネントがありまして、次のようにコンポーネントのテストを作ったりすると思いますが

/**
 * TimeTable.spec.js
 * @jest-environment jsdom
 */

import {createLocalVue, mount} from '@vue/test-utils'
import TimeTableVue from '../../../../../components/timeTable/templates/TimeTable'
import Vuex from 'vuex'  

　const localVue = createLocalVue()
  localVue.use(Vuex)

  let store

  const wrapper = mount(TimeTableVue, {
    stubs: ['font-awesome-icon'],
    propsData: {
      getServiceHandler: jest.fn(),
    },
    components: {},
    computed: {},
    store,
    localVue
  })

describe('text check', () => {
  it('should be some class', () => {
    expect(wrapper.find('.some_class').exists()).toBe(true)
  })
})

ここで、TimeTable.vue のメソッドに

// 略  
methods: {
    setDrivers (drivers) {
      this.drivers = drivers
    },
// 略

というメソッドがあった場合、テスト（TimeTable.spec.js）から

wrapper.setDrivers(drivers)

とやっても、

TypeError: setDrivers is not a function

みたいにメソッドが見つからないエラーになってしまいます。

これ、Vueのコンポーネントにアクセスする場合は、

wrapper.vm

を使わないとダメなんですね。

つまり、TimeTable.vue コンポーネントの中の　setDrivers()　にアクセスしたい場合は

wrapper.vm.setDrivers()

としないとダメです。

Vue Test Utilsの公式サイトのwrapperの説明に下記のようにありました。
https://v1.test-utils.vuejs.org/api/wrapper/#properties

———————————————————————-
# vm

Component (read-only): This is the Vue instance. You can access all the instance methods and properties of a vm

with wrapper.vm. This only exists on Vue component wrapper or HTMLElement binding Vue component wrapper.

———————————————————————-

findとか使う場合は wrapper 自体を使うので、間違えちゃいますよね！
(๑>◡<๑)

投稿日:

jest Vueのテスト実行時の Unknown custom element: – did you register the component correctly? というエラーの解決方法

jest : バージョン27.4
Vue : バージョン 2.5.2

Vueのユニットテストをjestを使って取り組んでいます。

TimeTable.vueというvueファイルのテンプレート部分に次のような記述がありまして、

<template>
  <div>
    <h2 class="date">
      <font-awesome-icon icon="caret-left" />
      {{ dateGetParameter }}
      <font-awesome-icon icon="caret-right" />
    </h2>
　…後略

テストのほうは下記の通りです。

/**
 * @jest-environment jsdom
 */

import Vuex from "vuex";
import {createLocalVue, shallowMount} from "@vue/test-utils";
import TimeTableVue from "../../../../../components/timeTable/templates/TimeTable";

const localVue = createLocalVue()

localVue.use(Vuex)

describe('TimeTable', () => {
  let store
  let getters
  beforeEach(() => {
    // gettersのモック
    getters = {
      getCompanyId: () => 1
    }
    // モックストア
    store = new Vuex.Store({
      getters
    })
  })

  it('should render correct contents', () => {
    const wrapper = shallowMount(TimeTableVue, {
      components: {},
      computed: {
      },
      store,
      localVue})
    expect(wrapper.find('save').exists()).toBe(true)
  })
})

テンプレートの<font_awesome-icon>の部分で下記のエラーが出ます。

jest Unknown custom element:  - did you register the component correctly?

下記に解決方法がありました。

https://aznric3boi91.medium.com/5-mins-to-fix-jest-tests-for-app-with-unknown-custom-element-did-you-register-the-component-23ae75d5620b

スタブを作ると解決します。

テストスクリプトの　//追加　とある部分を追加します。

/**
 * @jest-environment jsdom
 */

import Vuex from "vuex";
import {createLocalVue, shallowMount} from "@vue/test-utils";
import TimeTableVue from "../../../../../components/timeTable/templates/TimeTable";
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome' // 追加


const localVue = createLocalVue()

localVue.use(Vuex)

describe('TimeTable', () => {
  let store
  let getters
  beforeEach(() => {
    // gettersのモック
    getters = {
      getCompanyId: () => 1
    }
    // モックストア
    store = new Vuex.Store({
      getters
    })
  })

  it('should render correct contents', () => {
    const wrapper = shallowMount(TimeTableVue, {
      stubs: ['font-awesome-icon'], //追加
      components: {},
      computed: {
      },
      store,
      localVue})
    expect(wrapper.find('save').exists()).toBe(true)
  })
})
毎日寒いですね！スタブってみると酢豚を想像しちゃいますね！