如何修复此错误[Vue warn]:未知的自定义元素:使用< nuxt-link>Jest进行单元测试

ffscu2ro  于 2023-05-01  发布在  Vue.js
关注(0)|答案(2)|浏览(111)

我在运行npm run测试时遇到问题。错误是

[Vue warn]: Unknown custom element: <nuxt-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

SidebarCMS.spect.js

import { shallowMount } from "@vue/test-utils";
import SidebarCMS from "../layouts/SidebarCMS";

const factory = () => {
  return shallowMount(SidebarCMS, {});
};

describe("SidebarCMS", () => {

  test("renders properly", () => {
    const wrapper = factory();
    expect(wrapper.html()).toMatchSnapshot();
  });
});

谁能帮帮我?

wwwo4jvm

wwwo4jvm1#

您可以在创建示例时stub子组件。有关存根组件的更多信息,请查看此链接。
试试这样,这将解决你的警告!.

const factory = () => {
  return shallowMount(SidebarCMS, {
     stubs: {
      'nuxt-link': true,
      'any-other-child': true
     }
   });
};
o2rvlv0m

o2rvlv0m2#

从Naren接受的答案是可行的,但并不能解释所有的用例。

用例一:

我不需要访问NuxtLink的内部元素。=〉存根是一个很好的选择,所以这引出了Naren的答案:

const wrapper = shallowMount(SidebarCMS, {
  props,
  global: {
    stubs: {
      'nuxt-link': true,
    },
  },
});

用例二:

出于某些原因,我想访问NuxtLink的内部元素。=〉存根不起作用,相反,我们可以在测试文件中定义一个自定义组件:
注意:我们仍然需要在存根中列出NuxtLink并将其设置为false:

wrapper = shallowMount(SidebarCMS, {
  props,
  global: {
    stubs: {
      'nuxt-link': false,
    },
    components: {
      'nuxt-link': {
        template: '<a><slot/></a>',
      },
    },
  },
});

这样做的目的是将nuxt-link替换为您为其定义的模板。使用过的html元素会被保留,属性(如classes或“to”属性)会自动应用。
这意味着,给定nuxt-link的以下用法

<nuxt-link
  to="www.example.com"
  class="item-class"
><div>ItemContent</div></nuxt-link>

,wrapper的输出。html将被

<a to="www.example.com" class="item-class"><div>ItemContent</div></a>

相关问题