Vue-Test-Utils未知自定义元素：<router-link>

Question

我正在使用Jest使用vue-test-utils库运行我的测试。

即使我已经将VueRouter添加到localVue实例，它也说它实际上找不到路由器链接组件。如果代码看起来有点时髦，那是因为我使用TypeScript，但它应该非常接近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
  }
}

Jest测试

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.

感谢您提供的任何帮助！

Answer 1

将 <a href="javascript:void(0);" onclick="getCalendar('calendar_div',<?php echo date("Y",strtotime($date.' - 1 Month')); ?>,<?php echo date("m",strtotime($date.' - 1 Month')); ?>);"><span class="glyphicon glyphicon-chevron-left"></span></a> <select name="month_dropdown" class="month_dropdown dropdown"><?php echo $this->getAllMonths($dateMonth); ?></select> <select name="year_dropdown" class="year_dropdown dropdown"><?php echo $this->getYearList($dateYear); ?></select> <a href="javascript:void(0);" onclick="getCalendar('calendar_div',<?php echo date("Y",strtotime($date.' + 1 Month')); ?>,<?php echo date("m",strtotime($date.' + 1 Month')); ?>);"><span class="glyphicon glyphicon-chevron-right"></span></a> 存根添加到router-link（或shallow）方法选项中，如下所示：

shallowMount

或this way：

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

执行此操作后，错误应该消失。

Answer 2

为我工作：

[Package.json]文件

@property
def qs(self):
    parent = super().qs
    owner = getattr(self.request, 'user', None)

    return parent.filter(custom_user=owner)

[测试]文件

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

或者您可以尝试以下操作：

Answer 3

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