Question

当我正常启动我的应用程序（npm run serve）时，一切正常。但是当我想用 Jest 开始单元测试时，控制台给了我一个错误：

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

有人可以帮我吗？

插件/vuetify.ts

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

package.json

"dependencies": {
    "@vue/composition-api": "^1.0.0-rc.5",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vuetify": "^2.4.0",
    "webpack": "^4.45.0",
    "webpack-assets-manifest": "^4.0.1"
  },
  "devDependencies": {
    "@mdi/font": "^5.9.55",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "^4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^1.0.3",
    "eslint": "^6.7.2",
    "eslint-formatter-gitlab": "^2.2.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0-beta.4",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vuetify": "~2.3.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }

Answer 1

可能您没有在单元测试中创建正确的 Vue 实例。看看 vuetify 网站，有一个关于单元测试的 section，他们解释了如何将 vuetify 添加到 localVue 实例

Answer 2

我认为我正确地创建了 Vue 实例，我没有看到错误。

top-filter.spec.ts：

import TopFilter from '@/layout/TopFilter.vue'
import Vuetify from 'vuetify'
import { shallowMount, Wrapper, createLocalVue } from '@vue/test-utils'
import Vue from 'vue'

describe('topFilter.vue', () => {
  let vuetify: Vuetify, wrapper: Wrapper<Vue>
  beforeEach(() => {
    const localVue = createLocalVue()
    vuetify = new Vuetify()
    wrapper = shallowMount(TopFilter, {
      localVue,
      vuetify
    })
  })

  it('renders', () => {
    expect(wrapper.exists()).toBe(true)
  })
})

Vuetify 错误：未知的自定义元素：<v-app-bar> - 您是否正确注册了组件？

2 个答案: