未知的自定义元素：-您是否正确注册了组件？默认情况下， 组件上显示错误。

Question

我正在尝试为具有以下代码的default.vue文件编写测试：

default.vue

<template>
 <div>
   <top-nav :class="isSticky ? 'fixed-top stickyAnimate' : ''" />
   <main>
     <nuxt />
   </main>
   <footer />
 </div>
</template>

<script>
import TopNav from '../components/TopNav.vue';
import Footer from '../components/Footer.vue';
import StickyNavMixin from '../mixins/stickyNavMixin';

export default {
  components: {
    TopNav,
    Footer,
  },
  mixins: [StickyNavMixin],
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    if (!window.location.hash) {
      this.loading = false;
    }
  },
};
</script>

然后我的测试看起来像这样
default.spec.js

import { createLocalVue, shallowMount } from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import StickyNavMixin from '../mixins/stickyNavMixin';
import Default from '../layouts/default.vue';
import TopNav from '../components/TopNav.vue';
import Footer from '../components/Footer.vue';

const localVue = createLocalVue();
localVue.use(BootstrapVue);
localVue.mixin(StickyNavMixin);

describe('Default', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallowMount(Default, {
      localVue,
    });
  });

  test('is a Vue instance', () => {
    expect(wrapper.isVueInstance()).toBeTruthy();
  });

  test('has navbar component', () => {
    expect(wrapper.find(TopNav).exists()).toBe(true);
  });
});

[当我运行此测试时，出现错误提示：[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。位于--->

请引导我朝正确的方向前进。预先谢谢！

我正在尝试为default.vue文件编写测试，该文件具有以下代码：default.vue

Answer 1

我想出了解决该错误的方法。我只好把它从包装纸中取出来。您不必导入Nuxt，只需将字符串'nuxt'替换为包装器中的存根元素即可。

describe('DefaultLayout', () => {
  let wrapper;

  afterEach(() => {
    wrapper.destroy();
  });

  /** mount **/
  test('is a Vue instance', () => {
    wrapper = mount(DefaultLayout, {
      localVue,
      stubs: ['nuxt'],
    });
    expect(wrapper.isVueInstance()).toBeTruthy();
  });

 /** shallowMount **/
 test('is a Vue instance', () => {
    wrapper = shallowMount(DefaultLayout, {
       localVue,
       stubs: ['nuxt', 'top-nav', 'footer'],
    });
    expect(wrapper.isVueInstance()).toBeTruthy();
    // expect(wrapper.html()).toBe('<div>'); => this is to debug see below for output
  });
});

//DEBUG
"<div><top-nav-stub class=\"\"></top-nav-stub> <main><nuxt-stub></nuxt-stub> . 
</main> <footer-stub></footer-stub></div>"