jestでuuidをmockしようとしたら上手く出来なかったので備忘です
vueファイル
<template>
<div>
<button @click="createId"></button>
<div>{{ id }}</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import uuid from 'uuid'
export default Vue.extend({
name: 'UuidPage',
data(): {
id: string
} {
return {
id: '',
}
},
methods: {
createId() {
this.id = uuid.v4()
},
},
})
</script>
テストでやったこと
import { shallowMount } from '@vue/test-utils'
import uuidPage from '@/pages/UuidPage.vue'
import uuid from 'uuid'
jest.spyOn(uuid, 'v4').mockImplementation(() => {
return 'uuid-123'
})
describe('uuid test', () => {
it('is a Vue instance', () => {
// console.log(uuidSpy)
const wrapper = shallowMount(uuidPage)
wrapper.find('button').trigger('click')
expect(wrapper.vm.$data.id).toEqual('mockResponse')
})
})
エラー内容
Cannot spyOn on a primitive value; undefined given
spyOnとmockImplementationでやろうとするとこのエラーが出てくる
修正後テストコード
import { shallowMount } from '@vue/test-utils'
import uuidPage from '@/pages/UuidPage.vue'
jest.mock('uuid', () => ({
v4: () => {
return 'mockResponse'
},
}))
describe('uuid test', () => {
it('is a Vue instance', () => {
// console.log(uuidSpy)
const wrapper = shallowMount(uuidPage)
wrapper.find('button').trigger('click')
expect(wrapper.vm.$data.id).toEqual('mockResponse')
})
})
まあエラーで書いてあるとおりprimitive valueをspyOn出来ないっぽくて、定義ファイルのここにあるのはもう既に定義されちゃってるから無理だってことなんですかね?あんまりよくわかってないけど無理って言ってるなら無理ってことで・・・
.......
export const NIL: NIL;
export const parse: parse;
export const stringify: stringify;
export const v1: v1;
export const v3: v3;
export const v4: v4;
export const v5: v5;
export const validate: validate;
export const version: version;
調べてもあんまり出てこなかったので備忘です。
あとuuidの公式サイトにも書いてるけど使いたいのだけimportしてくる方が良いらしいです。
<template>
<div>
<button @click="createId"></button>
<div>{{ id }}</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { v4 as uuidv4 } from 'uuid'
export default Vue.extend({
name: 'UuidPage',
data(): {
id: string
} {
return {
id: '',
}
},
methods: {
createId() {
this.id = uuidv4() as string
},
},
})
</script>
コメントを残す