前提・実現したいこと
単体テストを書きたいです。しかし値の代入のタイミングがおかしくうまくいきません。
発生している問題・エラーメッセージ
1回目のコンソールログ console.log('1' + Store.message)の時点でStore.messageに値が代入されていない
2回目のコンソールログ? console.log('2' + Store.message)の時点では値が入っているが、なぜか「2test」ではなく「1test」が出力されている。
Console console.log 1 console.log 1test ● Message › trueの場合 expect(received).toBe(expected) // Object.is equality Expected: true Received: false 45 | it('trueの場合', () => { 46 | Store.message = 'test' > 47 | expect(wrapper.vm.showDialog).toBe(true) | ^ 48 | })
該当のソースコード
spec
1import { 2 createLocalVue, 3 shallowMount, 4} from '@vue/test-utils' 5import Vuex from 'vuex' 6import Dialog from '~/components/dialogs/dialog.vue' 7import { Store } from '~/store' 8 9jest.mock('~/store') 10const localVue = createLocalVue() 11localVue.use(Vuex) 12 13let wrapper: any 14 15describe('Message',() => { 16 beforeEach(() => { 17 jest.clearAllMocks() 18 wrapper = shallowMount(Dialog, { localVue }) 19 }) 20 21 it('trueの場合', () => { 22 Store.message = 'test' 23 expect(wrapper.vm.showDialog).toBe(true) 24 })
vue
1<template> 2 <v-dialog v-model="showDialog" persistent width="500"> 3 <v-card> 4 <v-card-title class="headline lighten-2"> 5 ERROR 6 </v-card-title> 7 <v-card-text> 8 {{ message }} 9 </v-card-text> 10 <v-divider /> 11 <v-card-actions> 12 <v-spacer /> 13 <v-btn color="primary" text @click="closeDialog"> 14 閉じる 15 </v-btn> 16 </v-card-actions> 17 </v-card> 18 </v-dialog> 19</template> 20 21<script lang="ts"> 22import { Component, Vue } from 'vue-property-decorator' 23import { Store } from '~/store' 24 25@Component 26export default class Default extends Vue { 27 created() { 28 dialogMessagesStore.unsetMessage() 29 } 30 closeDialog() { 31 dialogMessagesStore.unsetMessage() 32 } 33 34 get showDialog() { 35 console.log('1' + Store.message) 36 return !!dialogMessagesStore.message 37 console.log('2' + Store.message) 38 } 39} 40</script> 41
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー