web-dev-qa-db-ja.com

[Vue warn]：不明なカスタム要素：<nuxt-link>-jestユニットテストの実行時

問題

ユニットテストを行うためにJestを使用したルーティングでnuxt 1.4を使用しています。私のアプリケーションはエラーをスローせず、完全に動作しているようです。しかし、私の単体テストを実行すると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を作成し、提案されているようにコンポーネントをスタブ化しようとしました このgithubコメント内shallow/mountも試しましたが、それも機能しないようです。

vue.jsjestjsvue-routernuxt.jsvue-test-utils
13
Anima-t3d

これは私がいらいらさせる警告を取り除くことができた方法です。

RouterLinkStubを含めます。例：

import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';

NuxtLinkスタブをRouterLinkStubにマップする

const wrapper = shallowMount(TestItem, {
  ... 
  stubs: {
    NuxtLink: RouterLinkStub,
})

そして、あなたがnuxt-linkテキストか何かをチェックしていた場合、変更してください：

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/ で見つけました

コードを読むために日本語を知る必要がない良いこと...

5
Kristo J

私はこれを使ってそれをうまく動かすことができました ストーリーブックの回避策 ：

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
    })
})
1
mstrlaw

これを機能させるために、以下のコード行を追加しました。

  1. テストファイル

    import NuxtLink from "path to nuxt-link.js"

Mycomponent.components.NuxtLink = NuxtLink

  2. あなたのjest confファイル

    transformIgnorePatterns: [
   "path to nuxt-link.js"
],

または、マウントオプションの行の下に追加できます

mount(Mycomponent, {stubs: ["nuxt-link"]})
0
Chandru C R M

Unknow custom element: <router-link>

私の問題は、コンポーネントの作成時にmountではなくshallowを使用したことです。

浅い用法：

マウントと同様に、マウントおよびレンダリングされたVueコンポーネントを含みますが、子コンポーネントをスタブ化したものを含むラッパーを作成します。

ソース： https://vue-test-utils.vuejs.org/en/api/shallow.html

これが実際の例です

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');                                                                                     
    });   
  });     
});
0
Oldenborg
...
import NuxtLink from '../.nuxt/components/nuxt-link.js'

...
TestItem.components = TestItem.components || {};
TestItem.components.NuxtLink = NuxtLink;
const wrapper = shallow(TestItem, {
    ...
});

...
0
xtranophilist