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?
下記に解決方法がありました。
スタブを作ると解決します。
テストスクリプトの //追加 とある部分を追加します。
/**
* @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)
})
})
