Vue组合API计算属性测试答案

【问题标题】：Vue composition API computed property testVue组合API计算属性测试
【发布时间】：2020-11-02 10:02:43
【问题描述】：

我开始在一个新的 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 开始，但我现在尝试了很多场景，但没有通过计算属性的测试。

我很高兴你能给我的每一个小帮助，拯救我的一天。

【问题讨论】：

标签： vue.js vue-test-utils

【解决方案1】：

我遇到了同样的问题。看来您需要在测试中包含组合 API，然后将其附加到 vue 实例：

import CompositionApi from '@vue/composition-api'

const localVue = createLocalVue()

beforeEach(() => {
  localVue.use(CompositionApi)
})

如此处所述Vue composition API computed property test

【讨论】：