Javascript Vue和Jest单元测试组件

我在Vue js方面是个新手，我从Jest开始单元测试。我不知道从哪里开始，怎么开始。我有一段Vue代码，我想用Jest测试它。任何提示或想法我都会非常感激。 我读到我应该使用Vue测试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>

你可以阅读官方文件，它非常清晰，非常有用。还要了解如何模拟函数、存根和其他测试内容，请参阅Jest文档

在您的示例中，使用

propsData

而不是

props

（检查上面的文档），您应该在每个测试用例结束时使用一些断言（检查期望值）：

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


describe('User', () => {
  it('Should substract four letters', () => {
    const wrapper = shallowMount(User, {
      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');
  })
})