概要

ユニットテストにて、テスト対象のコンポーネントに自動インポートされる要素に対してFailed to resolve componentの警告が出る

stderr | tests/components/TodoItem.spec.ts > TodoList.vue > 編集ボタン > ボタンに「Edit」と表示されていること
[Vue warn]: Failed to resolve component: NuxtLink
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <TodoItem todo= { id: 1, title: 'some todo', completed: false, detail: 'test text' } ref="VTU_COMPONENT" > 
  at <VTUROOT>
[Vue warn]: Failed to resolve component: AtomsButton
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <TodoItem todo= { id: 1, title: 'some todo', completed: false, detail: 'test text' } ref="VTU_COMPONENT" > 
  at <VTUROOT>

テスト対象のファイル

https://github.com/RinyuDrvo/practice-todo-nuxt/blob/main/components/TodoItem.vue

あるべき姿

警告が出ないこと

調べたこと

isCustomElementの設定

vitest.config.mtsにcompilerOptions.isCustomElementの設定をすることで警告が消える。ただしNuxtLinkのようなものは固定で設定できるが、AtomsButtonのようなオリジナルのコンポーネントに対しても警告が出ており、それを一律にネイティブカスタム要素にするのは本来の使用方法と違っているような気がする

https://ja.vuejs.org/api/application.html#app-config-compileroptions

stubsに警告対象を設定

testing libraryのFAQに掲載のあった通りstubsに警告対象を設定してスタブ化すると警告は出なくなる。しかし要素内のテキストがレンダリングされない等でテストに支障が出る

import {render} from '@testing-library/vue'
import Component from './Component'

test('Can stub components', () => {
  render(Component, {
    global: {stubs: ['FontAwesomeIcon']},
  })
})

https://testing-library.com/docs/vue-testing-library/faq/

RinyuDrvo / practice-todo-nuxt

ユニットテストにて`Failed to resolve component`の警告が出る #1

概要

テスト対象のファイル

あるべき姿

調べたこと

isCustomElementの設定

stubsに警告対象を設定