Jest/Vue：注册组件

Posted 2023-02-22

【中文标题】Jest/Vue：注册组件

【英文标题】：Jest/Vue: registering components

【发布时间】：2018-07-29 03:32:59

【问题描述】：

为什么我不能在我的 Jest 规范中挂载我的组件（为简洁起见，这里的大部分代码都被省略了）？

# Photos.vue
<script>
  import Vue from 'vue'

  export default 
    name: 'photos'
    data: function () 
      ...
    
  
</script>

这是我的规格：

# Photos.test.js
import Vue from 'vue'
import  mount  from '@vue/test-utils'

Vue.component('photos', require('./Photos.vue').default)

describe('photos', () => 
  test('is a Vue instance', () => 
    const wrapper = mount(photos)
    expect(wrapper.isVueInstance()).toBeTruthy()
  )
)

这是错误：

ReferenceError: photos is not defined

   6 | describe('photos', () => 
   7 |   test('is a Vue instance', () => 
>  8 |     const wrapper = mount(photos)

【参考方案1】：

你不能使用照片，因为你没有定义它。

# Photos.test.js
import Vue from 'vue'
import  mount  from '@vue/test-utils'

let photos = require('./Photos.vue')
Vue.component('photos', photos)

describe('photos', () => 
  test('is a Vue instance', () => 
    const wrapper = mount(photos)
    expect(wrapper.isVueInstance()).toBeTruthy()
  )
)

【讨论】：

啊，谢谢。我认为组件中的 name: 'photos' 属性使名称可用？

@CD-RUM 实际上，使用name 的唯一应用是自引用组件。把它写出来是个好习惯，但大多数时候你不需要它。

使完全有意义。感谢您的信息！