Zenn
Closed5

Nuxt3 で useFetch/useAsyncData を利用したページ(DOM)のユニットテストを書きたい

Test
Nuxt 3
ざきざき

3.1 時点では

  • auto import への Mock 未サポート
    • vi.stubGlobal("useFetch", vi.fn()) 等で Mock する必要あり
  • script setup にて useFetch/useAsyncData から取得した data が flushPromises しても描画されない

という状態。
現状は以下から知れる。

ざきざき

現状は、以下のように記載してユニットテストするしかなさそう。

<script setup lang="ts">
const hello = ref<string | null >(null)
onBeforeMount(async () => {
  hello.value = (await useFetch("/api/hello")).data.value
})
</script>

refresh, error などの機構が使えないため $fetch で事足りるが以下 Issue と同様の type error が発生する。

このスクラップは2023/12/12にクローズされました