タグ: #vue test utils

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 自体を使うので、間違えちゃいますよね！
(๑>◡<๑)