Mac + Vue + Vue Test Utils + Vuetify 개발 환경 구축

nodebrew 설치

$ brew install nodebrew
$ nodebrew help|head -n1
nodebrew 1.0.1

$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
$ nodebrew install-binary stable
$ nodebrew use stable
$ node -v
v12.4.0

$ nodebrew use v10.16.0
$ node -v
v10.16.0

$ npm update -g npm
$ npm -v
6.14.3

yarn 설치

$ brew install yarn
$ yarn --version
1.17.0

@vue/cli 설치

$ yarn global add @vue/cli
$ yarn global upgrade --latest @vue/cli
@vue/cli 4.2.3
$ yarn info vue | grep version:
  version: '2.6.11',

Vue 설치

$ mkdir -p ~/Developer/sample-vue && cd ~/Developer/sample-vue
$ vue create sample-app
$ yarn serve

↓ htp://127.0.0.1:8080/



Vue 설치 후 트리

~/Developer/sample-vue/sample-app
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── yarn.lock
$ yarn serve

Vue Test Utils 설치

$ cd ~/Developer/sample-vue/sample-app
$ vue add --dev  @vue/test-utils @vue/cli-plugin-unit-jest

Vue Test Utils 설치 후 트리

~/Developer/sample-vue/sample-app
├── README.md
├── babel.config.js
├── jest.config.js ■ 追加
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── tests ■ 追加
│   └── unit ■ 追加
│       └── example.spec.js ■ 追加
└── yarn.lock

TEST 실행 결과

$ cd ~/Developer/sample-vue/sample-app
$ yarn test:unit tests/unit/example.spec.js
yarn run v1.22.4
$ vue-cli-service test:unit tests/unit/example.spec.js
 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    ✓ renders props.msg when passed (26ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.172s
Ran all test suites matching /tests\/unit\/example.spec.js/i.
✨  Done in 3.99s.

Vuetify 설치

$ cd ~/Developer/sample-vue/sample-app
$ vue add vuetify
$ yarn info vuetify | grep version:
  version: '2.2.18',
$ yarn serve

↓ htp://127.0.0.1:8080/

~/Developer/sample-vue/sample-app
├── README.md
├── babel.config.js
├── jest.config.js
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── logo.png
│   │   └── logo.svg ■ 追加
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── plugins ■ 追加
│       └── vuetify.js ■ 追加
├── tests
│   └── unit
│       └── example.spec.js
├── vue.config.js
└── yarn.lock

TEST

vi ~/Developer/sample-vue/sample-app/src/components/HelloWorld.vue

~/Developer/sample-vue/sample-app/src/components/HelloWorld.vue

<template>
  <div>
    <p id="htmlMessage">{{ message }}</p>
    <v-btn @click="onClick" small>CountUp</v-btn>
    <p id="count">{{ count }}</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      message: 'HelloWorld',
      count: 0
    }),
    methods: {
      onClick () {
        this.count++
      }
    }
  }
</script>

~/Developer/sample-vue/sample-app/tests/unit/example.spec.js

~/Developer/sample-vue/sample-app/tests/unit/example.spec.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import { createLocalVue, mount, shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Vuetify)

const localVue = createLocalVue()

describe('CustomCard.vue', () => {
  let vuetify
  let wrapper
  beforeEach(() => {
    vuetify = new Vuetify()
    wrapper = mount(HelloWorld, {
      localVue,
      vuetify,
    })
  })

  it('renders a vue instance', () => {
    expect(wrapper.isVueInstance()).toBe(true);
  })

  it('Checks the message of vm', () => {
    let vmMessage = wrapper.vm.message
    expect(vmMessage).toMatch('HelloWorld')
  })

  it('Checks the message of html', () => {
    let htmlMessage = wrapper.find('#htmlMessage').text()
    console.log(htmlMessage)
    expect(htmlMessage).toMatch('HelloWorld')
  })

})

단위 테스트

$ cd ~/Developer/sample-vue/sample-app
$ yarn test:unit tests/unit/example.spec.js
yarn run v1.22.4
$ vue-cli-service test:unit tests/unit/example.spec.js
 PASS  tests/unit/example.spec.js
  CustomCard.vue
    ✓ renders a vue instance (81ms)
    ✓ Checks the message of vm (27ms)
    ✓ Checks the message of html (31ms)

  console.log tests/unit/example.spec.js:32
    HelloWorld

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.531s, estimated 2s
Ran all test suites matching /tests\/unit\/example.spec.js/i.
✨  Done in 2.79s.

Vue로 unit 테스트를 하기 위한 기초 기초 메모

함수 이름
설명
이용 케이스


mount
하위 구성 요소에 실제 구성 요소 사용
컴포넌트끼리 협력이 필요한 경우

shallowMount
하위 구성 요소에 더미 구성 요소 사용
구성 요소 단위로 테스트



Matcher
설명
사용 예


.toBe(value)
result와 actual 등가인 것의 비교
expect(4).toBe(4)

.toEqual(value)
result와 actual의 연관 배열의 내용이 일치하는지 비교
expect({two: 2,one: 1}).toEqual({one: 1,two: 2})

.toMatch(regexp)
result에 대한 정규식으로 비교
expect ( 'abcdefg'). toMatch (/abc/)

.toBeGreaterThan(number)
결과가 actual보다 크다.
expect(11).toBeGreaterThan(10)

.toBeGreaterThanOrEqual(number)
결과가 actual 이상
expect(10).toBeGreaterThanOrEqual(10)

.toBeLessThan(number)
결과가 actual보다 작음
expect(9).toBeLessThan(10)

.toBeLessThanOrEqual(number)
결과가 actual 이하
expect(10).toBeLessThanOrEqual(10)

.toBeCloseTo(number, 자리수)
결과의 특정 소수 자릿수까지 actual과 일치하는지 비교 (js는 소수점 계산으로 오차가 나오기 때문에)
expect(0.1 + 0.2).toBeCloseTo(0.35, 1)

.toHaveLength(number)
result의 length와 actual과 일치하는지 비교
expect([1,2]).toHaveLength(2)

.toBeInstanceOf(class)
result가 actual과 같은 클래스의 인스턴스화 또는 비교
class Klass {}

expect (new Klass ()). toBeInstanceOf (Klass)


.toHaveProperty(value)
결과의 특정 키와 일치합니까?
expect({a:false,b:{c:1,d:'A'}}).toHaveProperty('a')//key a가 있는지

expect({a:false,b:{c:1,d:'A'}}).toHaveProperty('a',false)//key a는 false


expect({a:false,b:{c:1,d:'A'}}).toHaveProperty('b.c',1)


.toMatchObject(value)
결과의 일부와 actual이 일치하는지
expect({a:1,b:2}).toMatchObject({a: 1})

.toContain(value)
결과에 actual이 포함되어 있습니까?
expect([1,2]).toContain(2)

expect ( 'ABCDEFG').toContain('EFG')


.toBeNull()
result가 Null인지 여부
expect (null). toBeNull ()

.toBeUndefined()
결과가 Undefined인지 여부
expect().toBeUndefined()

참고

설치 — Vue.js
htps : // jp. 아 js. rg/v2/구이데/인 s타치온. HTML

빠른 시작 — Vuetify.js
htps : // ゔ에치 fyjs. 코 m / 자 / 껄껄 g-s r d / 구이 ck-s rt /

Guides | Vue Test Utils
h tps : // ㅔ 에- st- 중 ls. 아 js. rg / gue s / # 갓찐 g rs d

@vue/cli-plugin-unit-jest
htps : // 기주 b. 이 m/ゔ에 js/ゔ에-cぃ/t레에/에서 v/파카게 s/%40ゔ에/cぃ-pㅅㅅㅜㅜㅜ

Expect · Jest
htps : // 지 stjs. 이오/도 cs/엔/에 x페ct

단위 테스트 — Vuetify.js
htps : // ゔ에치 fyjs. 코 m / 그럼 / 껄껄 g-s r d / 우니 t- s s g /