App.vue

<template>

  <div id="app">

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>

<style lang="stylus">

</style>

----------------------------------------

HelloWorld.spec.js

// import Vue from 'vue'

// import HelloWorld from '@/components/HelloWorld.vue'

// describe('HelloWorld.vue', () => {

//   it('renders props.msg when passed', () => {

//    const root = document.createElement('div')

//    root.className = 'root'

//    document.body.appendChild(root)

//   //  console.log(document.body.innerHTML)

//     new Vue({

//       render: h => h(HelloWorld, {

//         props: {

//           msg: 'dell lee'

//         }

//       })

//     }).$mount('.root')

//     // console.log(document.body.innerHTML)

//     // 至此 渲染完成 可以写断言

//     // console.log(document.getElementsByClassName('hello').length)

//     expect(document.getElementsByClassName('hello').length).toBe(1)

//   })

// })

// // 以上这种测试是有局限性的，只能测试ui展现的 编写也不是快捷

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

import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {

  it('renders props.msg when passed', () => {

    const msg = 'new message'

    // shallowMount 浅渲染 浅拷贝 适合单元测试使用

    // mount 组件和子组件全部渲染 适合集成测试使用  使用mount性能相应会降低

    const wrapper = shallowMount(HelloWorld, {

      propsData: { msg }

    })

    // wrapper.text() 获取组件文本的所有内容

    // expect(wrapper.text()).toMatch(msg)

    expect(wrapper.props('msg')).toEqual(msg)

    expect(wrapper.findAll('.mmm').length).toBe(1) // 测试.mmm的个数是几个

    // TODO 

    wrapper.setProps({msg: 'hello'})

    console.log(wrapper.props('msg')) // TODO setProps之后在打印出来，怎么还是new message

    expect(wrapper.props('msg')).toEqual('hello')

    // TODO 快照测试

  })

})

// https://vue-test-utils.vuejs.org/zh/   vue-test-utils官网

---------------------------------------------------------------

HelloWorld.vue

<template>

  <div class="hello">

    <h1 class="mmm">{{ msg }}</h1>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  }

}

</script>

<style scoped lang="stylus">

</style>

----------------------------------------

问题？ 

TODO setProps之后在打印出来，怎么还是new message