未知的自定义元素： - 是否正确注册了组件？默认值中的 <nuxt /> 组件出错.vue 开玩笑

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>

那么我的测试看起来像这样默认规格.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 警告]：未知的自定义元素： - 是否正确注册了组件？为 递归组件，请确保提供"name"选项。在 ---> 中找到

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

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>"

Answer 2

您需要在测试文件中导入 default.vue(deeply( 使用的所有组件，或者更好的方法是动态导入它们。 此问题有一些解决方案： 链接