【Vue/Nuxt】-테스트편(컴퍼넌트)- 날씨 API를 사용해 일대로 프런트를 실장해 본다

전제 조건

【Vue/Nuxt】-Vuex편- 날씨 API를 사용해 한가지 프런트를 실장해 본다
위 기사에서 날씨 API 데이터를 받았습니다.
【Vue/Nuxt】-컴포넌트편- 날씨 API를 사용해 한가지 프런트를 구현해 본다
상기 기사에서 컴포넌트, 화면 완성

테스트를 써라!

그 전에 테스트 도구(Jest/vue-test-utils)

jest

자바스크립트 테스트 프레임워크(Facebook제)
Jest · 🃏 편안한 자바 스크립트 테스트

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 입니다.
이번에는 3건의 테스트를 쓰고 있습니다.

언어화하면 이런 느낌

①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 클래스를 가진 요소의 내용이 '오늘'임을 테스트하고 있습니다.

무사히 다녔다 🎉

이것을 알면, 나머지 2건도 알 수 있다! 속성을 테스트하고 싶을 때는 .attributes() 를 사용합니다.

그 밖에도 테스트하고 싶은 항목에 따라 매번 Jest의 공식을 확인해보세요~
처음 알면 다음 번부터 구구리 힘이 붙을 것 💪

다음에 Vuex 스토어 테스트 기사를 씁니다.
【Vue/Nuxt】-테스트편(스토어)- 날씨 API를 사용해 한가지 프런트를 실장해 본다