Edited at

【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 の部分でテストを行なっています。

1行目:実際のデータの型はObjectか

2行目:実際のデータにdateLabelというプロパティが含まれているか

3.4行目:同上

スクリーンショット 2019-03-13 1.01.11.png

無事に通った🎉

jestについては、この記事がわかりやすいです。

Facebook製のJavaScriptテストツール「Jest」の逆引き使用例


テスト編まとめ


  • 今回書いたように簡単にVueコンポーネント・ストアのテストが書ける。

  • コンポーネントが指定された状態で正しく動く保証になる。

  • 今後、修正や保守が発生した場合に備えることができる。

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