Vue composition API computed property test - vue.js

Question

I starting to use the composition API in a new Vue project and start developing with TDD. Also, I start to use TypeScript.
I create a very simple Component 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>
And now I starting to test very basic stuff in Logo.spec.js file
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')
})
})
My problem now is that the test for the output of my computed property fullName fails every time.
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)
Also when I make a console.log(wrapper.html()) I get only an empty div-container. Why?
I followed some articles to start with TDD and Vue and also composition API, but I tried now a lot of scenarios without passing the test for the computed property.
I'm happy about every little help you can give me and save my day.

Answer 1

I had the same problem. It looks like you need to include the composition API in the test, and then attach it to the vue instance:
import CompositionApi from '#vue/composition-api'
const localVue = createLocalVue()
beforeEach(() => {
localVue.use(CompositionApi)
})
As described here Vue composition API computed property test