Javascript Vue.js：在jasmine测试中使用propsData

我正在使用browserify和vue.js，并有一个基本的Jasmine测试-如下所示：

import Vue from 'vue'
import Cast from '../../../frontend/components/Cast.vue'

describe('Cast.vue', () => {
  it('should render correct contents', () => {
    const vm = new Vue({
      data: { cast: {name: 'testName'} },
      template: '<div><cast :cast="cast"></cast></div>',
      components: { Cast }
    }).$mount()
    expect(vm.$el.querySelector('tr td').textContent).toBe('testName')
  })
})

<template>
  <tr>
    <td>{{ cast.name }}</td>
  </tr>
</template>

<script>

export default {
  props: {
    cast: Object
  },
}
</script>

---

下面是一个关于如何使用

propsData

您的示例对我来说仍然失败，但我认为您应该在实例化时提供

el

，而不是像您的示例中那样在定义组件时提供。下面这句话对我来说是过去时

it('works with propsData', () => {
  var mount = document.createElement('div');
  var Comp = Vue.extend({
    props: ['msg'],
    template: '<div>{{ msg }}</div>'
  });

  var vm = new Comp({
    el: mount,
    propsData: {
      msg: 'hello',
    },
  });

  expect(vm.msg).toEqual('hello');
});

it（'与propsData一起工作'，（）=>{
var mount=document.createElement（'div'）；
var Comp=Vue.extend({
道具：['msg']，
模板：“{{msg}}”
});
var vm=新公司({
埃尔：山，
propsData：{
msg:'你好'，
},
});
expect（vm.msg）.toEqual（'hello'）；
});

下面是一个关于如何使用

propsData对Vue组件进行单元测试的快速示例

您的示例对我来说仍然失败，但我认为您应该在实例化时提供
el
，而不是像您的示例中那样在定义组件时提供。下面这句话对我来说是过去时

it('works with propsData', () => {
  var mount = document.createElement('div');
  var Comp = Vue.extend({
    props: ['msg'],
    template: '<div>{{ msg }}</div>'
  });

  var vm = new Comp({
    el: mount,
    propsData: {
      msg: 'hello',
    },
  });

  expect(vm.msg).toEqual('hello');
});

it（'与propsData一起工作'，（）=>{
var mount=document.createElement（'div'）；
var Comp=Vue.extend({
道具：['msg']，
模板：“{{msg}}”
});
var vm=新公司({
埃尔：山，
propsData：{
msg:'你好'，
},
});
expect（vm.msg）.toEqual（'hello'）；
});
在事件中，我使用@broox的帖子为我指明了正确的方向。诀窍是在
.Vue
文件中扩展Vue

<template>
  <tr>
    <td>{{ cast.name }}</td>
  </tr>
</template>

<script>

    import Vue from 'vue'

    export default Vue.extend({
      props....
    )}

</script>

我将把@broox的答案作为公认的答案，但这个答案可能会帮助任何使用vueify和测试组件的人。
如果我使用@broox的帖子为我指明正确的方向。诀窍是在
.Vue
文件中扩展Vue

<template>
  <tr>
    <td>{{ cast.name }}</td>
  </tr>
</template>

<script>

    import Vue from 'vue'

    export default Vue.extend({
      props....
    )}

</script>

我将把@broox的答案作为公认的答案，但这个答案可能会帮助任何使用vueify和测试组件的人。
我真的不明白你的意思，你想要什么？很抱歉不清楚。可能会提供更多的上下文。我想我可能误解了如何在测试中正确初始化组件。在上面，我正在围绕我感兴趣的组件创建一个VM（Cast），然后将数据传递给VM，VM随后初始化Cast本身。我想我要做的是，以某种方式创建一个Cast本身的实例。但我不确定这是否可行。是propsData选项。如果我理解您的问题，您希望向作为prop传递的对象添加自定义数据，以便您可以测试组件是否正确接收了prop，是吗？我想了解如何在测试中使用
propsData
。如果可能的话，直接实例化一个Cast组件。我真的不明白你的意思，有没有关于你要找什么的参考资料？很抱歉不清楚。可能会提供更多的上下文。我想我可能误解了如何在测试中正确初始化组件。在上面，我正在围绕我感兴趣的组件创建一个VM（Cast），然后将数据传递给VM，VM随后初始化Cast本身。我想我要做的是，以某种方式创建一个Cast本身的实例。但我不确定这是否可行。是propsData选项。如果我理解您的问题，您希望向作为prop传递的对象添加自定义数据，以便您可以测试组件是否正确接收了prop，是吗？我想了解如何在测试中使用
propsData
。如果可能的话，直接实例化一个Cast组件。