vue + jest单元测试之一 --- 创建一个vue项目单元测试的demo

创建一个vue项目单元测试的demo

1、创建新项目vue webpack init unit-test

2、在src/components下创建组件 content.vue

<template>
  <div class="content-wrap">
    <h1 class="title">{
    
    {
    
     content }}</h1>
  </div>
</template>

<script>
export default {
    
    
  name: 'Content',
  props: {
    
    
    content: {
    
    
      type: String,
      default: 'Welcome to Your Vue.js App'
    }
  },
  data () {
    
    
    return {
    
    
    }
  }
}
</script>

<style scoped>
</style>

3、在test/unit/specs下创建content.spec.js

import {
    
     shallowMount } from '@vue/test-utils'
import content from '@/components/content'

describe('Component.content', () => {
    
    
  const wrapper = shallowMount(content, {
    
    
    propsData: {
    
    
      content: 'Hello'
    }
  })

  it('传值正确', () => {
    
    
    expect(wrapper.vm.content).toBe('Hello')
  })

  it('渲染正确', () => {
    
    
    wrapper.setProps({
    
    
      content: 'Hello World!'
    })
    expect(wrapper.find('.title').exists()).toBe(true)
  })
})

4、yarn add @vue/test-utils 添加单元测试实用工具库

5、yarn test

报错的话这篇博客有解决方法： https://blog.csdn.net/qq_39367226/article/details/109247391

6、 运行结果如下，第一个单元测试的demo就成功了