실전 코드로 배우는 Vue.js

380

실전 코드로 배우는 Vue.js

await app.unmount();

});

이제 모두 잘 작동할 것 같지만 여전히 테스트는 실패할 것이다. 그 이유는

fetch

API

가 비

동기식인 반면 컴포넌트의

beforeMount

라이프사이클 훅은 그렇지 않기 때문이다.

fetch

API

가 완료되기 전에 훅이 먼저 완료되면

data

값이 변경되지 않는다. [그림

11

-

7

]에서 이러

한 현상을 확인할 수 있다.

그림

11-7

useFetchuseFetch

테스트 실패 테스트 실패

이 문제를 해결하려면

Vue

공식 라이브러리인

Vue

테스트 유틸 (@

vue

/

testutils

)

4

을 동원

해야 한다. 이 라이브러리는

Vue

컴포넌트 테스트에 필요한 각종 유틸리티 메서드를 제공한

다. 그중

flushPromises

를 사용하면

fetch

API

가 데이터를 반환할 때까지 대기 상태가 유

지되므로, 이후 올바르게

data

를 검증할 수 있다.

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

it('should fetch data from the given url', async () => {

//...

4

https

://

oreil

.

ly

/

dZILU

381

CHAPTER 11

Vue 테스트

await flushPromises();

expect(result.data.value).toEqual({ ...