4.3.2 简单的断言
优质
小牛编辑
135浏览
2023-12-01
你不必为了可测性在组件中做任何特殊的操作,导出原始设置就可以了:
<template> <span>{{ message }}</span> </template> <script> export default { data () { return { message: 'hello!' } }, created () { this.message = 'bye!' } } </script>
然后随着 Vue 导入组件的选项,你可以使用许多常见的断言:
// 导入 Vue.js 和组件,进行测试 import Vue from 'vue' import MyComponent from 'path/to/MyComponent.vue' // 这里是一些 Jasmine 2.0 的测试,你也可以使用你喜欢的任何断言库或测试工具。 describe('MyComponent', () => { // 检查原始组件选项 it('has a created hook', () => { expect(typeof MyComponent.created).toBe('function') }) // 评估原始组件选项中的函数的结果 it('sets the correct default data', () => { expect(typeof MyComponent.data).toBe('function') const defaultData = MyComponent.data() expect(defaultData.message).toBe('hello!') }) // 检查 mount 中的组件实例 it('correctly sets the message when created', () => { const vm = new Vue(MyComponent).$mount() expect(vm.message).toBe('bye!') }) // 创建一个实例并检查渲染输出 it('renders the correct message', () => { const Constructor = Vue.extend(MyComponent) const vm = new Constructor().$mount() expect(vm.$el.textContent).toBe('bye!') }) })