Vue 和 Jest 单元测试组件

Posted 2023-02-22

【中文标题】Vue 和 Jest 单元测试组件

【英文标题】：Vue and Jest unit testing components

【发布时间】：2019-01-02 09:17:46

【问题描述】：

我是 Vue js 的新手，我开始使用 Jest 进行单元测试。我不知道从哪里以及如何开始。我有这段 Vue 代码，我想用 Jest 进行测试。任何提示或想法我都会非常感激。 我读到我应该使用 Vue test-utils 中的 shallowMount 来避免组件测试期间的麻烦

<template >
  <div class="wrapper">
    <div class="user">
      <span> user.substr(0, 4) </span>
    </div>
  </div>
</template>
<script>
export default 
  props: 
    user: 
      type: String,
      required: true
    
  

</script>

目前我有这样的事情，但我不知道如何继续

import  shallowMount  from '@vue/test-utils'
import User from '../User.vue'


describe('User', () => 
  it('Should substract four letters', () => 
    const wrapper = shallowMount(User, 
      props: 
        ''
      
    )
  )
)

【参考方案1】：

您可以阅读vue-test-utils 官方文档，它非常清晰且很有帮助。要了解如何模拟函数、存根和其他测试内容，请参阅 Jest 文档。

在您的示例中 - 使用 propsData 而不是 props（查看上面的文档），您应该以一些断言结束您的每个测试用例（检查期望）：

describe('User', () => 
   it('Should substract four letters', () => 
      const wrapper = shallowMount(User, 
      propsData: 
        user: 'User00000000'
      
    )
   // check that span element has correct substring
   expect(wrapper.find(".user span").text()).toBe('User');
  )
)