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

前提条件

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

テストを書いていく！

その前に、テストのツール（Jest/ vue-test-utils）

jest

JavaScriptのテストフレームワーク（Facebook製）
Jest · 🃏快適なJavaScriptのテスト

vue-test-utils

Vue.js向けの公式単体テストライブラリ
コンポーネントだけのテストなどもできる
ガイド | Vue Test Utils

ちょっとまって、テストなんて書いたことないよって方

この記事がわかりやすいのでぜひ見てみて！
フロントエンドにテストを導入

コンポーネントテストを書いてみる

前回の記事で作成したForcastCard コンポーネントのテストをします。
本体のコードはこちら→【Vue/Nuxt】-コンポーネント編- 天気APIを使って一通りフロントを実装してみる

ディレクトリ構成は下記のとおり

• ForcastCard
  • index.vue
  • style.scss
  • props-template.js
  • index.test.js

propsのテンプレートファイル作成

props-template.js

export default {
  forecast: {
    dateLabel: `今日`,
    telop: `晴のち曇`,
    image: {
      url: `http://weather.livedoor.com/img/icon/5.gif`,
      title: `晴のち曇`
    }
  }
};

index.test.js

import { shallowMount } from '@vue/test-utils';
import { getMountTemplate } from '~/utils/test/component-test-util';
import propsTemplate from './props-template';
import TargetComponent from './index';

describe('コンポーネント', () => {
  test('props', () => {
    const wrapper = shallowMount(TargetComponent, getMountTemplate(propsTemplate));

    expect(wrapper.find('.forcast-list__title').text()).toBe(propsTemplate.forecast.dateLabel);
    expect(wrapper.find('.forcast-list__telop').text()).toBe(propsTemplate.forecast.telop);
    expect(wrapper.find('.forcast-list__image').attributes().src).toBe(propsTemplate.forecast.image.url);
  });
});

実際にテストしている部分はexpect のところです。
今回は３件のテストを書いています。

言語化するとこんな感じ

①forcast-list_titleクラスを持つDOMエレメントを指定
(wrapper.find('.forcast-list__title')

②テストする要素のテキストはpropsTemplate.forecast.dateLabel
.text()).toBe(propsTemplate.forecast.dateLabel);

propsTemplate.forecastは、props-template.jsに書いてある dateLabel: '今日' の部分です。

つまり、forcast-list_titleクラスを持つ要素の中身は'今日'である ということをテストしています

無事に通った🎉

これが分かれば、あと２件もわかる！属性をテストしたいときは .attributes() を使います。

他にもテストしたい項目によって都度Jestの公式を確認してみてください〜
最初が分かれば、次回からググり力がつくはず💪

次回はVuexのストアテストの記事を書きます
【Vue/Nuxt】-テスト編（ストア）- 天気APIを使って一通りフロントを実装してみる