Объект, отправленный как проп, не определен при тестировании Vue SF C с Jest

Question

Я хочу протестировать Vue отдельный файловый компонент, который получает реквизит в качестве входных данных. Когда я высмеиваю опору, которая является объектом, я получаю сообщение об ошибке, что объект не определен. Ошибка возникает из HTML, где используются значения объекта. Если я сделаю реквизит, например, строкой (и удаляю answer.value и :class="{'active': answer.selected}" из HTML), все будет работать нормально.

Компонент:

<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>

Тест file:

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' из неопределенного

Пожалуйста, сообщите, что я делаю неправильно. Спасибо!

Answer 1

Мне удалось это исправить, добавив v-if="answer" на <div class="answer-container" ..., что довольно странно (поскольку это не асинхронные данные c), поскольку код работает нормально при проверке приложения в браузере - проблема только появился во время модульного тестирования компонента. Я предполагаю, что есть также исправление в способе тестирования Jest / Unit, что-то вроде объявления реквизита после завершения рендеринга / монтирования компонента ...