问题
我正在使用nuxt 1.4和使用Jest进行单元测试的路由。我的应用程序不会抛出错误，似乎完美无缺。但是，当运行我的单元测试npm run unit（运行jest）时，它会在终端中抛出错误：[Vue warn]: Unknown custom element: <nuxt-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
预期
我希望它不会因为我的应用程序正在运行而抛出此错误。
文件
package.json：
{
"name": "vue-starter",
"version": "1.0.0",
"description": "Nuxt.js project",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"test": "npm run lint && npm run unit",
"unit": "jest",
"unit:report": "jest --coverage"
},
"dependencies": {
"babel-jest": "^22.4.1",
"jest-serializer-vue": "^1.0.0",
"node-sass": "^4.7.2",
"npm": "^5.7.1",
"nuxt": "^1.0.0",
"sass-loader": "^6.0.7",
"vue-jest": "^2.1.1"
},
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.12",
"babel-eslint": "^8.2.1",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"jest": "^22.4.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
}
}
我测试的组件：
<template>
<div>
<nuxt-link class="name" :to="{ path: `entity/${item.id}`, params: { id: item.id }}">{{item.name}}</nuxt-link>
<button class="connect" @click="connect">{{ btnText }}</button>
</div>
</template>
<script>
// import nuxtLink from '../.nuxt/components/nuxt-link';
const connectionStatusMap = [
'Connect',
'Connected',
'Pending',
'Cancel',
];
export default {
/*components: {
'nuxt-link': nuxtLink,
},*/
props: {
item: {
type: Object
}
},
...
}
</script>
我的测试脚本：
import TestItem from '../components/TestItem';
import { shallow, mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VueRouter)
...
it(`should show the entity`, () => {
const wrapper = mount(TestItem, {
propsData: { item },
localVue,
store,
// stubs: ['nuxt-link'],
})
expect(wrapper.find('.name').text()).toBe(item.name);
});
it(`should show allow me to connect if I'm not yet connected`, () => {
const wrapper = shallow(TestItem, {
propsData: { item },
localVue,
store,
stubs: ['nuxt-link'],
})
expect(wrapper.find('.connect').text()).toBe('Connect');
});
...
我试过
我尝试创建一个localVue，并按照建议in this github comment来删除组件
我也尝试了shallow / mount，但这似乎也没有用。
答案 0 :(得分：6)
尽管提供的答案可能有效。我最终使用的是based on this guide
const wrapper = mount(TestItem, {
propsData: { item },
localVue,
store,
stubs: {
NuxtLink: true,
// Any other component that you want stubbed
},
});
答案 1 :(得分：3)
这就是我摆脱恼人警告的方式。
包括RouterLinkStub，例如：
import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';
将NuxtLink存根映射到RouterLinkStub
stubs: {
NuxtLink: RouterLinkStub,
},
如果您要检查nuxt链接文字或其他内容，请更改：
const link = wrapper.find('nuxt-link');
到
const link = wrapper.find(RouterLinkStub);
在https://onigra.github.io/blog/2018/03/19/vue-test-utils-router-link-stub/
上发现了这个黄金好东西，您不需要懂日语就可以阅读代码...
答案 2 :(得分：0)
...
import NuxtLink from '../.nuxt/components/nuxt-link.js'
...
TestItem.components = TestItem.components || {};
TestItem.components.NuxtLink = NuxtLink;
const wrapper = shallow(TestItem, {
...
});
...
答案 3 :(得分：0)
获得Unknow custom element: <router-link>
我的问题是，我在创建组件时使用了mount而不是shallow。
浅用：
与mount一样，它创建一个包含已安装和的包装器 渲染了Vue组件，但是使用了存根子组件。
以下是一个工作示例
import { shallow } from '@vue/test-utils';
import ContentCard from '../../components/ContentCard.vue';
import NuxtLink from '../../.nuxt/components/nuxt-link';
const createComponent = propsData => shallow(ContentCard, { propsData });
describe('ContentCard', () => {
let component;
beforeEach(() => {
ContentCard.components = ContentCard.components || {};
ContentCard.components.NuxtLink = NuxtLink;
});
describe('Properties', () => {
it('has an imgSrc property', () => {
component = createComponent({ imgSrc: 'X' });
expect(component.props().imgSrc).toBe('X');
});
});
});
答案 4 :(得分：0)
我在下面的代码行中添加了此功能。
在您的测试文件中
import NuxtLink from "path to nuxt-link.js"
Mycomponent.components.NuxtLink = NuxtLink
在您的jest conf文件中
transformIgnorePatterns: [
"path to nuxt-link.js"
],
或者您可以在安装选项的下面添加一行
mount(Mycomponent, {stubs: ["nuxt-link"]})
答案 5 :(得分：0)
我设法使用此workaround for Storybook使其正常工作：
import { mount, createLocalVue } from '@vue/test-utils'
import Component from '@/components/Component.vue'
const localVue = createLocalVue()
localVue.component('nuxt-link', {
props: ['to'],
template: '<a href="#"><slot>NuxtLink</slot></a>',
})
describe('Test Component', () => {
const wrapper = mount(Component, {
stubs: ['nuxt-link'],
localVue
})
})
答案 6 :(得分：0)
我有：
// path: ./test/jest.setup.js
import Vue from 'vue'
import VueTestUtils from '@vue/test-utils'
// Mock Nuxt components
VueTestUtils.config.stubs['nuxt-link'] = '<a><slot /></a>'
VueTestUtils.config.stubs['no-ssr'] = '<span><slot /></span>'
和
// path: ./jest.config.js
module.exports = {
// ... other stuff
setupFilesAfterEnv: ['./test/jest.setup.js']
}
...这解决了我在nuxt应用中的所有玩笑测试
答案 7 :(得分：0)
// test/jestSetup.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import { config } from '@vue/test-utils'
Vue.use(Vuetify)
config.stubs.NuxtLink = { template: '<a><slot /></a>' }