如何使用 Jest 测试 Vue.js 模态组件？答案

【问题标题】：How do you test a Vue.js modal component with Jest?如何使用 Jest 测试 Vue.js 模态组件？
【发布时间】：2019-03-30 12:16:35
【问题描述】：

我有一个 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 - Wrapper 必须包含一个 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')

我运行测试，得到以下结果：

失败测试/单元/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)

我的代码有什么错误，我该如何纠正？谢谢

【问题讨论】：

标签： testing vue.js jestjs

【解决方案1】：

您传递的选项应该在对象的根级别，并且使用propsData 选项设置道具数据：

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

【讨论】：