JEST Unknown custom element: <client-only> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Nuxt.js에서 JEST를 사용하다 보면 마주치는 오류중 하나로 <client-only> template tag를 JEST에서 해석할 수 없어서 나타나는 증상 중 하나입니다.

대표적으로 nuxt-link 등의 nuxt만의 고유한 태그들에서 이러한 현상이 발생할 수 있습니다.

 

Unknown custom element: <client-only> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

 

 

 

 

이것을 해결하기 위해서는 JEST setup에서 mocking된 component.vue를 하나 생성해주어야 합니다.

// test/__mocks__/clientOnlyMock.vue

<template>
  <span>
    <slot />
  </span>
</template>

<script>
export default {
  name: 'clientOnlyMock',
}
</script>

<style scoped></style>

 

 

 

 

 

setup.js를 통해 생성한 컴포넌트를 JEST에게 설정을 사용한다고 명시해주어야 합니다.

// test/setup.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import { config } from '@vue/test-utils'
import clientOnlyMock from '@/test/__mocks__/clientOnlyMock'

Vue.use(Vuetify, {})

Vue.config.silent = true

// Mock Nuxt components
config.stubs['client-only'] = clientOnlyMock

 

 

 

 

마지막으로 jest.config.js를 통해 setup.js를 호출해주어야 합니다.

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
    '@nuxtjs/composition-api': '@nuxtjs/composition-api/lib/entrypoint.js',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
  ],
  setupFiles: ['<rootDir>/test/setup.js'],
}

 

이렇게 하고 테스트를 돌려보면 오류 없이 테스트 케이스가 Passed로 통과되는 모습을 볼 수 있습니다.

 

 

 

 

 

 

Reference

https://qiita.com/S_yu_yu_yu/items/f97f75acc9396b9182d5

Nuxt.jsでテストを書いたらclient-onlyで詰まった【vue-test-utils】 - Qiita