실전 코드로 배우는 Vue.js

382

실전 코드로 배우는 Vue.js

expect(result.error.value).toBe(null);

await flushPromises();

expect(result.error.value).toEqual(new Error('test error'));

});

비슷한 방식으로 애플리케이션 외부 테스트

API

를 모의하거나, 테스트가 끝난 의존성 함수

를 모의해 테스트 스위트의 복잡도를 낮출 수 있다. 이번 절에서는

Vitest

와

Vue

테스트 유

틸을 활용해

useFetch

메서드를 성공적으로 테스트할 수 있었다.

계속해서

Vitest

와

Vue

테스트 유틸로

Vue

컴포넌트를 테스트해보자.

11.711.7

VueVue

테스트 유틸로 컴포넌트 테스트하기 테스트 유틸로 컴포넌트 테스트하기

Vue

엔진은

Vue

컴포넌트의 설정에 따라 브라우저

DOM

에 컴포넌트 인스턴스를 생성 및

업데이트하고 관리한다. ‘컴포넌트를 테스트한다’라는 것은 컴포넌트 렌더링 결과가

DOM

에 잘 반영되는지 테스트한다는 뜻이다. 테스트가 실행되는

Node

.

js

환경에 브라우저가 존

재하지 않으므로, 이를 시뮬레이션하기 위해

vite

.

config

.

ts

에서

test

.

environment

를

jsdom

으로 설정해야 한다. 또한 컴포넌트를 마운팅하고 가상

Vue

노드에서

DOM

엘리먼트 ...