Vue.js 프로젝트에 Jest 도입

vue-cli로 프로젝트 만들기

공식 을 참고로, vue-cli 를 사용해 UnitTest 검증을 위한 프로젝트를 만듭니다.
vue init webpack utest- webpack 보일러 플레이트를 사용한 새로운 프로젝트
- utest 프로젝트의 이름

샘플이므로 인터랙티브한 질문 항목에 대해서는 적당히 엔터키를 눌러 갑니다. 도중에 Pick a test runner 라는 항목이 나옵니다. 여기에서 어느 것 하는가? .
Mocha는 타사 어설션, 모의, 스파이 도구를 결합하여 테스트를 수행하는 프레임 워크입니다. 한편, Jest는 그들이 한데 모인 풀 스택 테스트 프레임 워크라고 할 수 있습니다. 이번에는 쉽게 시작할 것 같다. 공식 일본어 문서도 있습니다.
이 기사에서는 언급하지 않지만 e2e 테스트는 Nightwatch로 유지했습니다.

Jest

디렉토리 구성

Jest의 디렉토리 구성은 이런 느낌이었습니다.

테스트 실행

설치 직후의 상태에서 테스트를 실행하기 전에 화면을 확인해 봅시다.

   vue-cli · Generated "utest".

   To get started:

     cd utest
     npm install
     npm run dev

vue-cli 실행 후 표시되는 내용에 따라 명령을 실행합니다.npm run dev 를 하면 친숙한 화면이 나옵니다.

테스트 내용 확인

초기 상태에서 다음 테스트 코드가 들어 있습니다.

HelloWorld.spec.js

import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld';

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld);
    const vm = new Constructor().$mount();
    expect(vm.$el.querySelector('.hello h1').textContent)
    .toEqual('Welcome to Your Vue.js App');
  });
});

일본어로 요약하면 이런 느낌이 듭니다.
- HelloWorld 구성 요소에 대해 단위 테스트 수행
- '올바른 콘텐츠 그리기' 동작을 검증
- vm 에 컴퍼넌트를 마운트한 상태의 오브젝트를 포함
- .hello h1 요소의 텍스트 내용이 Welcome to Your Vue.js App와 같은지 확인

테스트 실행

npm run unit 에서 Jest 단위 테스트를 실행하면 결과가 출력됩니다.

이전 테스트 케이스를 통과하고 있음을 알 수 있습니다.
또한 테스트 커버리지 요약도 표시됩니다.

테스트 실패

테스트 코드의 어설션을 약간 다시 작성하여 테스트를 실패해 봅니다.

HelloWorld.spec.js

import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld';

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld);
    const vm = new Constructor().$mount();
    expect(vm.$el.querySelector('.hello h1').textContent)
    .toEqual('Welcome to Your Vue.js Appp');  // change the expected result.
  });
});

예상대로 실패했습니다.
보기 쉽다!

이번에는 우선 사용하기 시작할 때까지 확인했습니다.
자세한 내용은 다음 번 이후.