以Jest测试Vue SFC时未定义作为prop发送的对象

Question

我想测试一个Vue单个文件组件，该组件接收一个prop作为输入。当我模拟作为对象的prop时，我得到一个错误，即该对象未定义。该错误来自使用该对象的值的HTML。例如，如果我将prop设为字符串（并且从HTML中删除了answer.value和:class="{'active': answer.selected}"），则一切正常。

Component：

<template>
  <div class="answer-container" @click="setActiveAnswer()" :class="{'active': answer.selected}">
    <div class="answer">
      <p>{{answer.value}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Answer',
  props: {
    answer: Object,
  },
  methods: {
    setActiveAnswer() {
      this.$emit('selectedAnswer', this.answer);
    }
  }
}
</script>

测试文件：

import { mount } from '@vue/test-utils'
import Answer from './../../src/components/Answer'

describe('Answer', () => {

  it('should receive "answer" as prop', () => {
    const answer = {
      value: 'testAnswer',
      selected: true
    };
    const wrapper = mount(Answer, {
      propsData: {
        answer: answer
      }
    });
    expect(wrapper.props().answer.value).toBe('testAnswer');
  })
})

我得到的错误是：

TypeError：无法读取未定义的属性'selected']

请告知我我在做什么错。谢谢！

我想测试一个Vue单个文件组件，该组件接收一个prop作为输入。当我模拟作为对象的道具时，我得到一个错误，该对象是未定义的，该错误来自HTML，其中...

Answer 1

我设法通过在v-if="answer"上添加<div class="answer-container" ...来解决此问题，这很奇怪（因为这不是异步数据），因为在浏览器中检查应用程序时代码可以正常工作-该问题仅在单元测试时出现组件。我想在Jest / Unit测试方式中也有一个修复程序，类似于在组件完成渲染/安装后声明道具...