Vue-Test-Utils 알 수 없는 사용자 지정 요소:

Vue-Test-Utils 알 수 없는 사용자 지정 요소:

나는 제스트를 사용하여 vue-test-utils 라이브러리를 활용하여 테스트를 실행하고 있다.

localVue 인스턴스에 VueRouter를 추가했는데, 라우터 링크 구성요소를 실제로 찾을 수 없다고 나와 있어.코드가 좀 펑키해 보이면 타이프스크립트를 사용하고 있기 때문인데 ES6에 가깝게 읽혀야 한다...중요한 것은 @Prop()이 소품에서 지나가는 것과 같다는 것이다: {..}

Vue 구성 요소:

<template>
  <div>
    <div class="temp">
      <div>
        <router-link :to="temp.url">{{temp.name}}</router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import { Temp } from './Temp'

@Component({
  name: 'temp'
})
export default class TempComponent extends Vue {
  @Prop() private temp: Temp
}
</script>

<style lang="scss" scoped>
.temp {
  padding-top: 10px;
}
</style>

온도 모델:

export class Temp {
  public static Default: Temp = new Temp(-1, '')

  public url: string

  constructor(public id: number, public name: string) {
    this.id = id
    this.name = name
    this.url = '/temp/' + id
  }
}

제스트 테스트

import { createLocalVue, shallow } from '@vue/test-utils'
import TempComponent from '@/components/Temp.vue'
import { Temp } from '@/components/Temp'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)

describe('Temp.vue Component', () => {
  test('renders a router-link tag with to temp.url', () => {
    const temp = Temp.Default
    temp.url = 'http://some-url.com'

    const wrapper = shallow(TempComponent, {
      propsData: { temp }
    })
    const aWrapper = wrapper.find('router-link')
    expect((aWrapper.attributes() as any).to).toBe(temp.url)
  })
})

제가 무엇을 빠뜨리고 있나요?시험은 실제로 통과하면 경고만 던진다.사실 다음과 같은 결과를 얻을 수 있다.

테스트 출력:

$ jest --config test/unit/jest.conf.js
 PASS  ClientApp\components\__tests__\temp.spec.ts
  Temp.vue Component
    √ renders a router-link tag with to temp.url (30ms)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Unknown custom element: <router-link> - did you register the 
component correctly? For recursive components, make sure to provide the 
"name" option.

    (found in <Root>)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.677s
Ran all test suites.
Done in 6.94s.

네가 줄 수 있는 어떤 도움이라도 고마워!

추가router-link을 꽉 채우다shallow(또는)shallowMount) 다음과 같은 메서드 옵션:

const wrapper = shallow(TempComponent, {
     propsData: { temp },
     stubs: ['router-link']
})

또는 다음과 같은 방법으로:

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

const wrapper = shallow(TempComponent, {
     propsData: { temp },
     stubs: {
         RouterLink: RouterLinkStub
     }
})

네가 이렇게 하고 나면 오류가 없어질 거야.

날 위해 일했어:

[ 패키지.json ] 파일

...
"vue-jest": "^3.0.5",
"vue-router": "~3.1.5",
"vue": "~2.6.11",
"@vue/test-utils": "1.0.0-beta.29",
...

[ 테스트 ] 파일

import App from '../../src/App';
import { mount, createLocalVue } from '@vue/test-utils';
import VueRouter from 'vue-router';

const localVue = createLocalVue();
localVue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      name: 'dashboard',
      path: '/dashboard'
    }
  ]
});

describe('Successful test', ()=>{
  it('works', ()=>{    
    let wrapper = mount(App, {
      localVue,
      router
    });

    // Here is your assertion
  });
});

또는 다음을 시도해 보십시오.

const wrapper = shallow(TempComponent, {
  propsData: { temp },
  localVue
})

Vue 3 및 Vue Test Utils Next (v4)를 사용하면 추가만 하면 될 것 같다.router(에서 반환되는 물체)createRouter)을(를) 플러그인으로mountOptions:

import router from "@/router";

const mountOptions = {
  global: {
    plugins: [router],
  },
};

https://next.vue-test-utils.vuejs.org/api/#글로벌

또는 더 자세한 예시:

import router from "@/router";
import Button from "@/components/Button.vue";

const mountOptions = {
  global: {
    mocks: {
      $route: "home",
      $router: {
        push: jest.fn(),
      },
    },
    plugins: [router],
  },
};


it("Renders", () => {
  const wrapper = shallowMount(Button, mountOptions);
  expect(wrapper.get("nav").getComponent({ name: "router-link" })).toExist();
});

위의 예에서 나는 Vue CLI를 사용하여 프로젝트 설정을 사용하고 있다.

참조URL: https://stackoverflow.com/questions/49681546/vue-test-utils-unknown-custom-element-router-link