【Vue/Nuxt】-テスト編（ストア）- 天気APIを使って一通りフロントを実装してみる

前提条件

【Vue/Nuxt】-Vuex編- 天気APIを使って一通りフロントを実装してみる
上記記事にて天気APIのデータを取得済み
【Vue/Nuxt】-コンポーネント編- 天気APIを使って一通りフロントを実装してみる
上記記事にてコンポーネント、画面完成
【Vue/Nuxt】-テスト編（コンポーネント）- 天気APIを使って一通りフロントを実装してみる
上記記事にてコンポーネントのテスト完成

ストアのテストを書いてみる

前回 コンポーネントテストを書いた時 にprops-template.jsを用意したように
payloadStub にモックのJSONを書いてあげます。

weather-app.test.js

import { createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { cloneDeep } from 'lodash';
import weatherAppStore from '../../src/store/modules/weather-app';

const localVue = createLocalVue();

localVue.use(Vuex);

describe('WeatherAppストアのテスト', () => {
  let store;

  beforeEach(() => {
    store = new Vuex.Store(cloneDeep(weatherAppStore));
  });

  it('天気を取得', () => {
    const payloadStub = {
      forecast: {
        dateLabel: `今日`,
        telop: `晴のち曇`,
        image: {
          url: `http://weather.livedoor.com/img/icon/5.gif`,
          title: `晴のち曇`
        }
      }
    };

    store.commit('updateWeather', {
      weather: payloadStub
    });

    const actual = store.state.weather;
    expect(actual.forecast).toBeInstanceOf(Object);
    expect(actual.forecast).toHaveProperty('dateLabel');
    expect(actual.forecast).toHaveProperty('telop');
    expect(actual.forecast).toHaveProperty('image');
  });
});

expect の部分でテストを行なっています。
１行目：実際のデータの型はObjectか
2行目：実際のデータにdateLabelというプロパティが含まれているか
3.4行目：同上

無事に通った🎉

jestについては、この記事がわかりやすいです。
Facebook製のJavaScriptテストツール「Jest」の逆引き使用例

テスト編まとめ

• 今回書いたように簡単にVueコンポーネント・ストアのテストが書ける。
• コンポーネントが指定された状態で正しく動く保証になる。
• 今後、修正や保守が発生した場合に備えることができる。

間違った記述などあればご指摘いただけると助かります。