未知的自定义元素： - 您是不是正确注册了组件？ default.vue Jest 中的 <nuxt /> 组件出错

Posted 2023-02-22

【中文标题】未知的自定义元素： - 您是不是正确注册了组件？ default.vue Jest 中的 <nuxt /> 组件出错

【英文标题】：Unknown custom element: - did you register the component correctly? error on with <nuxt /> component in default.vue Jest未知的自定义元素： - 您是否正确注册了组件？ default.vue Jest 中的 <nuxt /> 组件出错

【发布时间】：2020-02-02 02:34:58

【问题描述】：

我正在尝试为具有以下代码的 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 警告]：未知的自定义元素：- 您是否正确注册了组件？为了 递归组件，请确保提供“名称”选项。在 --->

中找到

请引导我走向正确的方向。提前谢谢！

【参考方案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>"