jeudi 25 octobre 2018

How do you test a Vue.js modal component with Jest?

I have a vuejs modal component that shows the modal of team members (avatar, full_name & description). I need to test it.

teamMembers.js looks like :

    <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 
            .team_member_status 
            .team_member_shadow
    </template>git status
    <script>
    export default {
      name: "TeamMember",
      props: {
        item: {},
      }
    };
    </script>

my test code is :

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"
            }
        } 
    }
});

I need to validate that the template generated the correct html - while the Wrapper must contain a Vue instance. I did this :

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

I run my test, got the following result :

 FAIL  tests/unit/specs/TeamMember.spec.js
  ● Test suite failed to run

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

what mistake in my code, & how can I correct it ? Thanks

Aucun commentaire:

Enregistrer un commentaire