Vitest Nuxt3 에서의 Mount 제어

정보가 하나도 없는 Vitest와 Nuxt3(Vue3)에서 조금이라도 도움이 되고자 글을 작성해 봅니다.

Test를 진행하는 과정 중에서 Mounted에 관련된 부분에서 제대로 작동 되지 않아서 로직이 안도는 등, 항상 문제의 원인인 LifeCycle hook쪽에서 지속적으로 문제가 발생하였습니다.

하지만, Vue utils를 뒤져봐도, Nuxt3의 test를 바라봐도 Mounted를 지원하지 않는 다는 말은 없었습니다.
이상하다 싶어서 조금 테스트를 해봤고, 결과를 보고 나서는 조금은 ref는 왜 사용하는지 조금 알게 됐습니다.
우선 코드로 보자면 아래와 같은 코드가 vue 파일이 될 것입니다.

<template>
	<div>
		{{ mountTest }}
	</div>
</template>

<script setup lang="ts">
const mountTest = ref('')

onMounted(() => {
	mountTest.value = '테스트다 이놈아'
})

</script>

위는 테스트를 진행할 코드이며 아래는 테스트 코드 입니다.

import { it, expect, describe } from "vitest";

// ---cut---

// tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended, renderSuspended } from "@nuxt/test-utils/runtime";
import { shallowMount, mount } from "@vue/test-utils";
import { nextTick } from "vue";

import Grid from "./basic.vue";

describe(" ============== Grid Test ============== ", () => {
	it("can also mount an app", async () => {
		const component = await renderSuspended(Grid);
		const wrapper = mount(Grid);
		
		await nextTick();

		console.log(component.html());
		console.log(wrapper.html());
	}, 10000);
});

renderSuspended() 는 Nuxt3 Test 문법이고, mount는 vue test utils의 문법입니다.

renderSuspended()는 await과 같이 사용한다면, 별다른 설정 없이 onMounted가 적용 되지만, mount의 경우에는 nextTick()을 사용해야 하지만, onMounted가 적용 됩니다.

아래의 경우에는 위치에 따라서 변수 접근 가능 여부에 대한 코드 입니다.

<template>
	<div>
		{{ mountTest }}
	</div>
</template>

<script setup lang="ts">
let mountTest1 = ‘’
const mountTest = ref('')

onMounted(() => {
	const mountedTest2 = ‘테스트다 이’ // 이 부분에 변수를 생성하면 접근 자체가 되지 않는다.
	mountTest1 = ‘테스트다 이놈‘ // 해당 부분은 테스트에 mounted hook이 적용 되지 않는다.
	mountTest.value = '테스트다 이놈아'
})

</script>