Как вы тестируете модальный компонент Vue.js с Jest?

Question

У меня есть модальный компонент vuejs, который показывает модальность членов команды (аватар, полное имя и описание).Мне нужно проверить это.

teamMembers.js выглядит так:

    <template lang="pug">
      .col-lg-4.col-md-6.team_member_wrapper
        a(href="javascript:;"  data-toggle="modal" data-target="#TeamMemberModal" @click="$emit('clicked', item)" )
          .team_member
            .team_member_image
              img(:src="item.avatar")
            .team_member_name {{item.full_name}}
            .team_member_status {{item.status}}
            .team_member_shadow
    </template>git status
    <script>
    export default {
      name: "TeamMember",
      props: {
        item: {},
      }
    };
    </script>

мой тестовый код:

import Vue from 'vue'
import  TeamMember  from '@/components/TeamMember.vue'
import {  mount } from '@vue/test-utils'


const wrapper = mount(TeamMember, {
  context: {
    props : {
        item : {
            avatar : 'path/to_image.png',
            full_name: "Robocop"
            }
        } 
    }
});

Мне нужно проверить, что шаблон сгенерировалправильный HTML - в то время как Оболочка должна содержать экземпляр Vue.Я сделал это:

wrapper.setProps({ avatar: 'path/to_image.png' }),
expect(wrapper.vm.avatar).toBe('path/to_image.png'),


wrapper.setProps({ avatar: 'Robocop' }),
expect(wrapper.vm.full_name).toBe('Robocop')

Я запустил свой тест, получил следующий результат:

FAIL tests / unit / specs / TeamMember.spec.js

● Не удалось запустить набор тестов

[vue-test-utils]: mount.context can only be used when mounting a functional component

   9 |        item : {
  10 |            avatar : 'path/to_image.png',
> 11 |            full_name: "Robocop"
     |                                            ^
  12 |            }
  13 |        } 
  14 |    }

  at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:11:9)
  at createInstance (node_modules/@vue/test-utils/dist/vue-test-utils.js:2847:5)
  at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5639:18)
  at Object.<anonymous> (tests/unit/specs/TeamMember.spec.js:11:36)

, какая ошибка в моем коде и как я могу ее исправить?Спасибо

Answer 1

Параметры, которые вы передаете, должны находиться на корневом уровне объекта, а данные реквизита задаются с помощью параметра propsData:

const wrapper = mount(TeamMember, {
  propsData: {
    item: {
      avatar: 'path/to_image.png',
      full_name: 'Robocop'
    }
  }
})