before, after 사용하기

Jest에서는 before와 after를 활용해서 테스트 전후에 실행할 코드를 작성 할 수 있습니다.

beforeEach와 afterEach

beforeEach는 테스트가 실행 되기전 afterEach는 테스트가 실행 된 후 실행이 됩니다. 단어 Each에서도 유추할수 있듯이 각각의 테스트가 실행되기 전후에 모두 실행이된다. 예를 들어 3개의 테스트가 있으면 beforeEach 또한 3번 호출된다.

1
2
3
4
5
6
7
8
9
10
11
12
13

beforeEach(() => {
    console.log('테스트 전 실행 됨');
});

afterEach(() => {
    console.log('테스트 후 실행 돔');
})

for (; i < 6; i++) {
    test(`테스트${i}`, ((i) => (() => {
        console.log(`테스트${i}`);
    }))(i));
}

비동기 사용하기

before, after에서도 비동기를 사용할수 있다. Jest 비동기를 통해서 Jest의 비동기 사용법을 알수 있다. 여기에서도 promise를 반환해주면 비동기를 사용할수 있다.

1
2
3
4
5
6
7
8
9
10
11
12

function asyncFn() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('비동기 사용');
            resolve();
        }, 500);
    });
}

beforeEach(() => {
    return asyncFn();
});

async, await를 통해서도 비동기를 사용할수 있다.

1
2
3

beforeEach(async() => {
    await asyncFn();
})

오직 한번만 실행 하기

before와 after를 테스트 파일에서 오직 한번 만 사용하기 위해서는 beforeAll와 afterAll를 사용하면 된다.

1
2
3
4
5
6
7

beforeAll(() => {
    console.log('테스트 전 오직 한번만 실행된다.');
});

afterAll(() => {
    console.log('테스트 후 한번만 호출된다.');
});

describe 내부에서의 before, after 사용하기

describe 내부에서 before와 after를 사용하는 경우에는 describe 내부의 테스트가 호출 될 경우에만 호출된다. 하지만 describe 외부의 before와 after는 describe 내부의 test를 포함한 테스트 파일 전체의 test가 호출 될때 호출이 된다.

test.only 사용하기

테스트가 실패할때 가장 먼저 확인 해봐야 할것은 테스트 케이스가 오직 실패하는 케이스만 실행 했을때에도 실패하는지 이다.
이를 위해서 test.only를 사용하면 다른 테스트는 스킵하고 해당 테스트만 실행된다. 이때 스킵되는 테스트는 test.only가 존재하는 테스트 파일에 한해서이다.

1
2
3

test.only('', () => {

});

Comment and share

비동기에서 사용할 함수

1
2
3
4
5

function fetchData(check) {
    return new Promise((resolve, reject) => {
        typeof check === 'function' ? check() : check ? resolve('peanut butter') : reject('error');
    });
}

콜백을 이용한 비동기 테스트 해보기

일반적인 상황에서 비동기를 사용하는 보편적인 방법 중 하나는 콜백을 사용하는 것이다. 하지만 Jest에서 테스트 할때는 의도대로 작동 하지 않는다.
Jest 테스트는 콜백을 호출할때까지 기다려주지 않는다. 테스트 함수 내에서 마지막 코드까지 실행을 하게되면 테스트를 완료하게 된다. 그래서 항상 테스트가 통과하게 된다. 테스트 실패하도록 값을 변경하여도 통과하는 것을 확인 할수있다.

1
2
3
4
5
6
7

test('비동기를 콜백 활용하기 - 실패', () => {
    function callback(data) {
        expect(data).toBe('peanut butter');
    }

    fetchData(callback);
});

파라미터 done을 활용한 비동기 테스트

done을 파라미터로 받은 경우에는 Jest에서는 done 함수가 호출 될때까지 테스트를 완료하지 않고 기다린다.

1
2
3
4
5
6
7
8
9
10
11
12

test('done을 활용하기', (done) => {
    function callback(data) {
        try {
            expect(data).toBe('peanut butter');
            done();
        } catch (e) {
            done(error);
        }
    }

    fetchData(callback);
});

Promise 활용 하기

비동기로 promise를 사용하는 경우에는 훨씐 간편하게 작성 할수 있다. promise를 리턴해주면 테스트가 정상적으로 작동하는 것을 확인할수 있다. 이때 promise를 리턴하지 않으면 테스트를 수행하기 전에 끝난다.

1
2
3
4
5

test('프로미스 활용하기', () => {
    return fetchData(true).then((data) => {
        expect(data).toBe('peanut butter');
    });
})

Promise Catch 테스트 하기

promise의 reject 또한 테스트 할수 있다. 이경우에는 then 대신에 catch를 활용한다. catch 내부에서 테스트 할 코드를 작성한다. 이때 expect.assertions(에러 발생한 횟수)를 테스트 위에 적어주지 않으면 테스트는 정상적으로 실행되지 못하고 완료되어 버린다.

1
2
3
4

test('프로미스 catch 테스트하기', () => {
    expect.assertions(1);
    return fetchData(false).catch((e) => expect(e).toMatch('error'));
})

Matchers인 resolves를 활용하기

promise then 대신에 Jest에서 제공하는 Matchers 중에 하나인 resolves를 활용할수도 있다. expect에 promise를 넘겨준다. 이때 여전히 return을 사용하여야 한다.

1
2
3

test('resolves 사용하기', () => {
    return expect(fetchData(true)).resolves.toBe('peanut butter');
});

Matchers인 rejects를 활용하기

promise catch 대신에 Jest에서 제공하는 Matchers 중에 하나인 rejects를 활용 할수도 있다. 사용 방법은 resolves와 유사하다. 이때 promise catch와 async와는 달리 expect.assertions를 사용하지 않아도 된다.

1
2
3

test('rejects 활용하기', () => {
    return expect(fetchData(false)).rejects.toBe('error');
});

async와 await를 활용하기

es6에서 제공하는 비동기 방법인 async와 await를 활용해서도 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

test('async와 await를 활용하기', async() => {
    let data = await fetchData(true);
    expect(data).toBe('peanut butter');
});

test('async와 await를 활용하기', async() => {
    expect.assertions(1);

    try {
        await fetchData(false);
    } catch (e) {
        expect(e).toMatch('error');
    }
});

Comment and share

Vuex를 사용하는 컴포넌트 테스트

actions를 mock 하기

아래의 컴포넌트는 vuex의 actions를 사용하는 코드이다. Vuex를 사용하는 컴포넌트를 테스트시에 주의해야 할 점은 actions가 어떻게 동작하는지는 중요하지 않다. 우리가 사용하고자 하는 action이 실제로 호출되었는지 여부만 테스트 한다.
action이 정확하게 동작하는지 여부는 vuex store 테스트시에 하게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
    <div class="text-align-center">
        <input type="text" @input="actionInputIfTrue">
        <button @click="actionClick()">Click</button>    
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { mapActions } from 'vuex'

@Component({
    methods: {
        ...mapActions(['actionClick'])
    },
})
export default class Actions extends Vue {
    actionInputIfTrue(event:any):void {
        const inputValue = event.target.value;
        if (inputValue === 'input') {
            this.$store.dispatch('actionInput', { inputValue });
        } 
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils';
import Vuex from 'vuex';
import Actions from '../Actions.vue';

const localVue = createLocalVue();

localVue.use(Vuex);

describe('Actions.vue', () => {
    let wrapper:Wrapper<Vue>;
    let actions:any;
    let store:any;

    beforeEach(() => {
        actions = {
            actionClick: jest.fn(),
            actionInput: jest.fn()
        };

        store = new Vuex.Store({
            actions,
        });

        wrapper = shallowMount(VuexComponent, { store, localVue });
    });

    it('dispatches "actionInput" when input event value is "input"', () => {
        const input = wrapper.find('input');
        input.element.value = 'input';
        input.trigger('input');
        expect(actions.actionInput).toHaveBeenCalled();
    });

    it('does not dispatch "actionInput" when event value is not "input"', () => {
        const input = wrapper.find('input');
        input.element.value = 'no input';
        input.trigger('input');
        expect(actions.actionInput).not.toHaveBeenCalled();
    });

    it('calls store action "actionClick" when button is clicked', () => {
        const button = wrapper.find('button');
        button.trigger('click');
        expect(actions.actionClick).toHaveBeenCalled();
    })
});

첫번째 주의해야 할 점은 테스트 시에는 localVue를 사용해야 한다는 것이다.
두번째 는 actions를 jest의 mock functions를 사용하여 테스트한다. 이를 이용하면 actions를 실제로 구현하지 않아도 호출되었는지 여부를 확인 할수 있다.
세번째 는 함수의 호출 여부를 확인 하는 assertion은 toHaveBeenCalled를 사용한다.

getters를 mock 하기

getters도 actions와 마찬가지로 어떻게 동작하는지는 중요하지 않다. getters의 결과가 실제로 렌더링 되는지 여부만 확인 해보면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
    <div>
        <p v-if="inputValue">{{inputValue}}</p>
        <p v-if="clicks">{{clicks}}</p>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'

    @Component({
        computed: mapGetters(['clicks', 'inputValue'])
    })
    export default class Getters extends Vue {

    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils';
import Vuex from 'vuex';
import Getters from '../Getters.vue';

const localVue = createLocalVue();

localVue.use(Vuex);

describe('Getters.vue', () => {
    let getters:any;
    let store:any;
    let wrapper:Wrapper<Vue>;

    beforeEach(() => {
        getters = {
            clicks: () => 2,
            inputValue: () => 'input'
        };
        store = new Vuex.Store({
            getters
        });
        wrapper = shallowMount(VuexComponent, { store, localVue });
    });
    
    it('Renders "store.getters.inputValue" in first p tag', () => {
        expect(wrapper.find('.input-value').text()).toBe(getters.inputValue());
    });

    it('Renders "store.getters.clicks" in second p tag', () => {
        expect(wrapper.findAll('p').at(1).text()).toBe(getters.clicks().toString());
    });
});

첫번째 는 actions와는 달리 getters는 jest의 mock functions를 사용하지 않는다. getters 객체를 작성하지만 로직은 중요하지 않는다.
두번째 는 getters의 리턴 값이 렌더링되었는지 여부를 확인 하는 건 wrapper의 text 메소드를 이용한다.

vuex의 모듈 방식 테스트하기

vuex의 모듈 방식을 활용한 테스트도 기존의 테스트랑 별 다를게 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
    <div>
        <button @click="moduleActionClick()">Click</button>
        <p>{{moduleClicks}}</p>
    </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator';
import { mapActions, mapGetters } from 'vuex';

@Component({
    methods: {
        ...mapActions(['moduleActionClick'])
    },
    computed: mapGetters(['moduleClicks'])
})
export default class MyModuleVuex extends Vue {
    
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils';
import Vuex from 'vuex';
import MyModuleVuex from '../MyModuleVuex.vue';
import myModule from '../../store/myModule';

const localVue = createLocalVue();

localVue.use(Vuex);

describe('MyModuleVuex', () => {
    let actions:any;
    let state:any;
    let store:any;
    let wrapper:Wrapper<Vue>;

    beforeEach(() => {
        actions = {
            moduleActionClick: jest.fn()
        };
        state = {
            clicks: 2
        };
        store = new Vuex.Store({
            modules: {
                myModule: {
                    state,
                    actions,
                    getters: myModule.getters
                }
            }
        });
        wrapper = shallowMount(MyModuleVuex, { store, localVue });
    });

    it('calls store action "moduleActionClick" when button is clicked', () => {
        wrapper.find('button').trigger('click');
        expect(actions.moduleActionClick).toHaveBeenCalled();
    })

    it('renders "state.clicks" in first p tag', () => {
        expect(wrapper.find('p').text()).toBe(state.clicks.toString());
    });
});

Vuex Store 테스트하기

지금까지는 Vuex를 사용하는 컴포넌트에 대해서 알아보았다. 그렇기 때문에 실제 Vuex의 내부 동작과는 무관한 테스트였다. 이번에는 Vuex가 정확하게 동작하는지 여부를 테스트 하기 위한 방법이다.
Vuex Store 테스트는 두가지 방법이 있다. 첫번째는 getters, mutations, actions를 독립적으로 테스트 하는 것이다. 두번째는 실제 Vuex Store를 생성하는 방법이다.
아래는 테스트에서 사용할 mutations와 getters 코드이다.

1
2
3
4
5

export default {
    increment(state:any) {
        state.count++;
    }
}

1
2
3
4
5

export default {
    evenOrOdd(state:any) {
        return state.count % 2 === 0 ? 'even' : 'odd'
    }
}

getters, mutations, actions를 독립적으로 테스트하기

독립적으로 테스트 하는 경우에는 좀더 상세하게 테스트를 진행할수 있다. 테스트가 실패하더라도 어디에서 실패했는지 찾기가 쉽다. 단점으로는 commit, dispatch같은 Vuex의 함수들을 mock 해야할 필요가 있다. 이는 유닛 테스트는 성공할지라도 mock이 정확하지 않기 때문에 실제 production 코드는 실패할수도 있다.

1
2
3
4
5
6
7

import mutations from '../mutations';

test('"increment" increments "state.count" by 1', () => {
    const state = { count: 1 };
    mutations.increment(state);
    expect(state.count).toBe(2);
});

1
2
3
4
5
6
7
8
9
10
11

import getters from '../getters';

test('"evenOrOdd" returns even if "state.count" is even', () => {
    const state = { count: 2 };
    expect(getters.evenOrOdd(state)).toBe('even');
});

test('"evenOrOdd" returns odd if "state.count" is odd', () => {
    const state = { count: 1 };
    expect(getters.evenOrOdd(state)).toBe('odd');
});

store를 사용한 테스트

실제로 Vuex sotre를 사용한 방법이다. 이 테스트의 장점은 Vuex function들을 mock 할 필요가 없다는 것이다. 하지만 테스트 실패시에 어디에서 문제가 발생했는지 찾기가 어렵다.

1
2
3
4
5
6
7
8
9
10

import mutations from './mutations';
import getters from './getters';

export default {
    state: {
        count: 0
    },
    mutations,
    getters
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import storeConfig from '../store-config';
import { cloneDeep } from 'lodash';

const localVue = createLocalVue();
let store:any;
localVue.use(Vuex);

beforeEach(() => {
    store = new Vuex.Store(cloneDeep(storeConfig));
});

test('increments "count" value when "increment" is committed', () => {
    expect(store.state.count).toBe(0);
    store.commit('increment');
    expect(store.state.count).toBe(1);
})

test('updates "evenOrOdd" getter when "increment" is committed', () => {
    expect(store.getters.evenOrOdd).toBe('even');
    store.commit('increment');
    expect(store.getters.evenOrOdd).toBe('odd');
})

해당 테스트에서는 cloneDeep를 사용하고 있는데 이는 각 테스트에 store를 클린하게 사용하기 위해서 이다.

그리고 생각해 보았을 때 상황에 맞추어서 하나씩만 적용 하던가 아니면 두개 모두를 적용해서 테스트 코드를 작성 하면 좋을거 같다.

Comment and share

vue 라우터 테스트 시에 주의 할점

vue 라우터를 테스트 할 시에 global Vue에 직접 추가를 해서는 안된다. vue 라우터를 설치 할 경우에는 $route와 $router가 vue 프로퍼티에 추가되어진다. 이는 $route와 $router를 mock 해서 테스트 하는 경우에 테스트를 실패하게 만든다.
vue-test-utils에서 제공하는 createLocalVue을 사용하는 것을 권장한다.

1
2
3
4
5
6
7
8
9
10
11

import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)
const router = new VueRouter()

shallowMount(Component, {
    localVue,
    router
})

router-link, router-view를 사용하는 컴포넌트 테스트 하기

위 두가지 컴포넌트를 사용하는 컴포넌트를 테스트 하는 방법은 두가지가 존재한다.

1. stubs 사용하기

stubs를 사용해서 자식 컴포넌트를 렌더링하는 것을 피한다.

1
2
3
4
5

import { shallowMount } from '@vue/test-utils'

shallowMount(Component, {
    stubs: ['router-link', 'router-view']
});

2. localVue를 사용하기

localVue를 이용해서 실제로 VueRouoter를 추가하는 방식이다.

1
2
3
4
5
6
7
8
9

import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'

const localVue = createLocalVue();
localVue.use(VueRouter);

shallowMount(Component, {
    localVue
});

$route, $router mock 하기

$route, $router 객체를 가지고 컴포넌트 테스트를 해야 할 경우가 있다. 이때는 $route, $router를 mock 하여 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13

import { shallowMount } from '@vue/test-utils'

const $route = {
    path: '/some/path'
}

const wrapper = shallowMount(Component, {
    mocks: {
        $route
    }
});

wrapper.vm.$route.path  // 이렇게 접근이 가능해진다.

Comment and share

데이터 테스트 하기

js에서는 데이터를 검증 할때 아래와 같이 작성한다.

1

expect(wrapper.vm.message).toBe('message');

ts에서도 위와 같은 코드를 작성한 후에 테스트를 돌리니 아래와 같은 에러가 발생하였다.

1
2

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/components/__tests__/HelloWorld.test.ts:12:23 - error TS2339: Property 'message' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.

그래서 정상적으로 테스트 하기 위한 방법은 두가지 정도 인거 같다.

1. vm.$data 사용하기

vm에는 data값을 가지고 있는 $data 객체가 존재한다. 해당 객체를 통해서 검증을 하면 가능하다.

1

expect(wrapper.vm.$data.message).toBe('message');

2. jest.config.js 수정하기

ts-jest를 사용하면 diagnostics옵션의 디폴트값이 true인데 위 코드 처럼 사용할 경우 에러를 발생시킨다. 이를 false로 설정하면 정상적으로 테스트가 가능하다.

1
2
3
4
5
6
7
8

module.exports = {
    /// ...
    globals: {
      'ts-jest': {
        diagnostics: false
      }
    }
}

Comment and share

타입스크립트를 사용할때 추가적으로 설치해야할 라이브러리

뷰를 jest를 통해서 테스트 하고자 할때 설치해야할 라이브러리 목록은 here를 통해서 확인이 가능하다.

1. ts-jest
2. @types/jest

jest.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

module.export = {
    // ...
    "moduleFileExtensions": [
      // ...
      "ts"
    ],
    "transform": {
      // ...
      "^.+\\.tsx?$": "ts-jest"
    },

    // jest는 기본적으로 js만을 테스트 파일로 찾기 때문에 .ts 파일도 테스트 파일로 찾을수 있도록 설정 해준다.
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
}

tsconfig.json

types에 jest를 추가해준다.

1
2
3
4
5
6
7
8
9

{
    "compilerOptions": {
        // ...
        "types": [
            // ...
            "jest"
        ],
    }
}

Comment and share

Setup

테스트 코드를 작성하다 보면 테스트마다 공통적으로 사용이 되는 코드가 존재한다. 그중에서 테스트 코드 로직을 실행 하기 이전에 실행이 되어야 하는 공통 코드가 있다. 이때는 사용되는 함수가 beforeEach 함수이다.
해당하는 함수는 각 테스트 코드가 실행되기 이전에 호출된다.

1
2
3

beforeEach(() => {
    // 보통 변수의 초기화 등의 코드가 들어가거나 테스트 코드 전에 실행되어야 할 로직이 들어간다.
});

테스트 종료시 호출

각 테스트가 종료 후에 호출이 되는 함수도 존재한다. 이는 afterEach 함수이다.

1
2
3

afterEach(() => {
    // 테스트 종류 후에 작업 해야 할 로직이 들어간다.
})

Comment and share

프로퍼티

1. vm

vm은 Vue 인스턴스이며, wrapper.vm으로 vm의 모든 메소드와 프로퍼티에 접근이 가능하다.

1
2

wrapper.vm.count;
wrapper.vm.method();

메소드

1. html

Wrapper DOM 노드의 HTML을 문자열로 반환을 해줍니다. 그래서 태그를 포함한 결과를 반환합니다.

1

expect(wrapper.html()).toBe('<div></div>');

2. text

Wrapper의 text만을 반환해줍니다.

1

expect(wrapper.text()).toBe('문자열');

3. find

선택자에 해당하는 DOM 노드 또는 해당하는 뷰 컴포넌트 중에 선번째 Wrapper를 반환해줍니다.

• Arguments:

  • {string | Component} selector

• Returns: {Wrapper}

1
2

wrapper.find('div');
wrapper.find(Component);

3. findAll

해당 하는 모든 Wrapper를 반환해줍니다.

• Arguments:

  • {string | Component} selector

• Returns: {WrapperArray}

4. exists

해당 Wrapper가 존재하는지 여부를 반환해줍니다.

1

expect(wrapper.exists()).toBeTruthy();

5. contains

Wrapper가 매칭되는 element 또는 컴포넌트를 포함하고 있는지 여부를 반환해줍니다.

1
2

expect(wrapper.contains('div')).toBeTruthy();
expect(wrapper.contains(Component)).toBeFalsy();

6. setData

data에 값을 할당 할수있습니다.

1

wrapper.setData({ data키:값 })

7. setProps

props에 값을 할당 할수있습니다.

1

wrapper.setProps({ prop키:값 })

8. trigger

trigger는 wrapper의 이벤트를 발동시켜줍니다. trigger는 추가적으로 option을 줄수 있습니다.
그리고 trigger의 결과를 테스트 할 때는 wrapper.vm.$nextTick를 이용하여 이벤트가 처리 된 후에 테스트 할수 있습니다.

1
2
3
4

wrapper.trigger('click');
wrapper.trigger('click', {
    ctrlKey: true   // @click.ctrl을 테스트 할수 있다.
})

9. emitted

wrapper의 vm에 의해 발동되어진 커스텀 이벤트를 포함하는 객체를 반환해 줍니다.

1
2
3
4
5
6
7
8

wrapper.vm.$emit('custom');
wrapper.vm.$emit('custom', 123);
wrapper.emitted();
/**
    {
        custom: [[], [123]]
    }
 */

Comment and share

Comment and share

new Vue를 이용한 컴포넌트 테스트

아래의 방법은 실제로 컴포넌트를 생성하여 테스트 하는 방법입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- HelloWorld.js -->

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello"
    }
  }
}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12

// helloworld.test.js

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

describe(('HelloWorld'), () => {
    it('new Vue를 이용한 테스트', () => {
        const helloWorld = new Vue(HelloWorld).$mount();
        const message = 'Hello';
        expect(helloWorld.message).toBe(message);
    });
});

Vue Test Utils 이용한 컴포넌트 테스트

Vue Test Utils에서 제공 하는 mount 함수를 이용해서 좀더 간편 하게 테스트를 할수 있습니다.
message에 접근 하기 위해서 vm 프로퍼티를 이용한다는게 다릅니다.

1
2
3
4
5
6
7
8
9
10
11
12

// helloworld.test.js

import { mount } from '@vue/test-utils';
import HelloWorld from '../components/HelloWorld.vue';

describe(('HelloWorld'), () => {
    it('new Vue를 이용한 테스트', () => {
        const wrapper = mount(HelloWorld);
        const message = 'Hello';
        expect(wrapper.vm.message).toBe(message);
    });
});

Comment and share