vue.js - Vue组合API计算属性测试
问题描述
我开始在一个新的 Vue 项目中使用组合 API,并开始使用 TDD 进行开发。另外,我开始使用 TypeScript。
我创建了一个非常简单的组件Logo.vue
<template>
<div>
<div class="c-logo__fullname">{{ fullName }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api'
interface User {
firstName: string
lastName: number
}
export default defineComponent({
props: {
user: {
type: Object as () => User,
required: true,
},
},
setup({ user }) {
const fullName = computed(() => `${user.firstName} ${user.lastName}`)
return {
fullName,
}
},
})
</script>
现在我开始在Logo.spec.js
文件中测试非常基本的东西
import { mount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'
let wrapper = null
const user = {
firstName: 'Test',
lastName: 'User',
}
beforeEach(() => {
wrapper = mount(Logo, {
propsData: {
user,
},
})
})
afterEach(() => {
wrapper.destroy()
})
describe('Logo', () => {
test('is a Vue instance', () => {
expect(wrapper.vm).toBeTruthy()
})
test('User has firstname "Test"', () => {
expect(wrapper.props().user.firstName).toBe('Test')
})
test('User has lastname "User"', () => {
expect(wrapper.props().user.lastName).toBe('User')
})
test('User has fullname "Test User"', () => {
expect(wrapper.find('.c-logo__fullname').text()).toBe('Test User')
})
})
我现在的问题是我的计算属性输出的测试fullName
每次都失败。
FAIL test/Logo.spec.js
Logo
✓ is a Vue instance (11 ms)
✓ User has firstname "Test" (2 ms)
✓ User has lastname "User" (2 ms)
✕ User has fullname "Test User" (7 ms)
● Logo › User has fullname "Test User"
expect(received).toBe(expected) // Object.is equality
Expected: "Test User"
Received: ""
35 |
36 | test('User has fullname "Test User"', () => {
> 37 | expect(wrapper.find('.c-logo__fullname').text()).toBe('Test User')
| ^
38 | })
39 | })
40 |
at Object.<anonymous> (test/Logo.spec.js:37:54)
此外,当我制作一个时,console.log(wrapper.html())
我只得到一个空的 div 容器。为什么?
我关注了一些文章,从 TDD 和 Vue 以及组合 API 开始,但我现在尝试了很多场景,但没有通过计算属性的测试。
我很高兴你能给我的每一个小帮助,拯救我的一天。
解决方案
我有同样的问题。看起来您需要在测试中包含组合 API,然后将其附加到 vue 实例:
import CompositionApi from '@vue/composition-api'
const localVue = createLocalVue()
beforeEach(() => {
localVue.use(CompositionApi)
})
如此处所述Vue 组合 API 计算属性测试
推荐阅读
- visual-studio-code - VSC 中的调试不会改变环境,并且会因“没有命名模块”而失败
- firebase - 在flutter中从firebase中检索特定的用户数据
- wpf - 分配给按钮时,在 Powershell 中播放音乐停止
- hangout - Google Hangout API中的空间名称是什么意思
- reactjs - 如何在 React js 上过滤产品
- vue.js - Api-Plaftom:vuetify 生成器:嵌套实体的问题
- flutter - 在 Freezed 中,是否可以从已经存在的冻结数据类创建联合案例
- c# - WPF:我可以用两种不同的方式显示一个替身吗?
- mongodb - 从对象数组中删除键值时出错
- matlab - Matlab:关闭并行池 - 仅适用于 parfeval() 但不适用于 spmd