[Vue.js] 단위 테스트 - VTU API

참조) API Reference | Vue Test Utils (vuejs.org)

API Reference | Vue Test Utils

mount 함수를 통해 Vue 컴포넌트를 wrapper 객체로 만들어 변수에 할당할 수 있다.

 

mount는 첫번째 인수로 Component를, 두번째 인수로는 MountingOptions를 가질 수 있다.

Mount 옵션

data

해당 컴포넌트의 data를 override한다. 무조건 함수로 작성해야 한다.

data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any

props

컴포넌트가 마운트 될 때 사용될 props를 설정한다.

props?: (RawProps & Props) | ({} extends Props ? null : never)

이는 Vue 파일에서 <Component :count="5" />를 한 것과 동일하다.

global

테스트에 전반적으로 사용할 global 옵션들을 지정한다.

주로 사용하는 옵션은 plugins

global.plugins

만약 옵션을 가진 플러그인을 사용할 때는 배열의 두번째 인수로 옵션을 제공한다.

Wrapper methods

attributes

컴포넌트의 template 태그의 속성을 설정하는 메소드.

attributes(): { [key: string]: string }
attributes(key: string): string
attributes(key?: string): { [key: string]: string } | string

exists

요소가 있는지를 파악하는 메소드.

exists(): boolean

find

요소를 찾아서 DOMWrapper 객체를 반환한다.

객체를 반환하므로 위의 exists 처럼 메소드를 사용할 수 있다.

find<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>
find<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>
find<T extends Element>(selector: string): DOMWrapper<T>
find(selector: string): DOMWrapper<Element>
find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;

setData

컴포넌트 내부의 data()를 수정한다.

setData(data: Record<string, any>): Promise<void>

반환 방식이 Promise 객체이므로 비동기로 작동한다.

async await 키워드를 사용하는 것을 잊지 말자.

이렇게 바꾼 data는 반응성을 가진다.

unmount

컴포넌트를 unmount한다.

unmount(): void

 

Wrapper properties

vm

vm: ComponentPublicInstance

test 환경에서는 this라는 키워드 대신에 vm이라는 키워드를 사용하여 접근한다. (vue model)