前提条件
【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のテンプレートファイル作成
export default {
forecast: {
dateLabel: `今日`,
telop: `晴のち曇`,
image: {
url: `http://weather.livedoor.com/img/icon/5.gif`,
title: `晴のち曇`
}
}
};
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を使って一通りフロントを実装してみる