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
|
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
|
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