vue + jestユニットテストの1つ--- vueプロジェクトのユニットテストのデモを作成します

vueプロジェクトの単体テストのデモを作成する

1.新しいプロジェクトvuewebpack initunit-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、糸テスト

エラーを報告した場合、このブログには解決策があります：https：//blog.csdn.net/qq_39367226/article/details/109247391

6.実行結果は次のとおりです。最初の単体テストのデモは成功します。