質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

0回答

956閲覧

jestを使った単体テストで、値代入のタイミングがおかしい

nagi166

総合スコア23

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2020/09/16 07:00

前提・実現したいこと

単体テストを書きたいです。しかし値の代入のタイミングがおかしくうまくいきません。

発生している問題・エラーメッセージ

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問