关于javascript:Vue测试

学习网站

• Vue3
• Vue 测试实用程序（2.0.0-beta.10)
• Vue 测试实用程序
• JestJS

实战代码

• https://github.com/Snail017/vue-unit-test-with-jest

Vue 测试实用程序入门

Vue 测试实用程序 Vue Test Utils，它是 Vue.js 的官网测试实用程序库！

• 装置组件
• 寻找元素
• 填写表格
• 触发事件

代码剖析

//TodoApp.vue 组件
<template>
  <div>
   <p v-if="admin" id="admin">Admin</p>
   <p data-test='todo' v-for="(item,index) in todos" :key=index>{{item.text}}</p>
  </div>
</template>

<script>
export default {
  name: 'TodoApp',

  data() {
    return {
      todos: [
        {
          id: 1,
          text: 'Learn Vue.js 3',
          completed: false
        }
      ],
      admin:false,
    }
  }
}

</script>



// 测试代码
import {mount} from '@vue/test-utils'
import TodoApp from './TodoApp.vue'

// 一个待办测试
test('renders a todo', () => {
  // 挂载组件
  const wrapper = mount(TodoApp,{data() {
      return {admin: true}
    }
  }) 
  

  const todo = wrapper.get('[data-test="todo"]')   // 应用 get() 获取已存在元素，没有则报错
  const todo1=wrapper.find("#admin").exists()        //## exists() 和 find() 判断元素是否存在，Y->true,N->false

  expect(todo).toBe(true)
  expect(todo1).toBe(true)
})