在 Vue 中设置包装器对象的子组件的道具

Question

我正在使用 vue-test-util 为我制作的组件编写一些测试。我已将我的代码归结为实际问题。

组件的形式为：

<template>
  <inner-component>
</template>
<script>
export default {
  name: 'MyList'
}
</script>

我的内部组件看起来像这样：

<template>
  <div v-if="open">Some stuff</div>
</template>
<script>
export default {
  name: 'InnerComponent',
  props: {
    open: false,
  }
}
</script>

现在我正在编写的测试是在 open 属性设置为 true 时测试 inner-component 中是否存在 div，但是它默认设置为 false。在测试之前，我需要一种方法来设置这个子组件的 prop。

我的测试：

import { createLocalVue, mount } from '@vue/test-utils'
import MyList from '@/components/MyList.vue'

describe('My Test', () => {
  const localVue = createLocalVue()
  const wrapper = mount(MyList)

  it('Tests', () => {
    // need to set the prop here
    expect(wrapper.find('div').exists()).toBeTruthy()
  }
}

我可以使用：

wrapper.vm.$children[0].$options.propsData.open = true

似乎设置了 prop，但我的测试仍然出现错误。

我可以更改组件，使默认值为真，然后我的测试通过，所以我认为这不是我正在检查的方式。

如果有人知道为什么这不起作用或知道更好的方法，请告诉我！

Answer 1

通过 vue-test-util 您可以使用包装器中的方法 setProps，查看相关文档 here

例如

const wrapper = mount(Foo)
wrapper.setProps({ foo: 'bar' })

Answer 2

根据 guide:

vm.$options

The instantiation options used for the current Vue instance.

所以，$options不是我们在props中写的。

使用$props为子组件设置属性：

wrapper.vm.$children[0].$props.open = true

但是这样会导致警告：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

所以，让我们听从建议，将子组件的属性与父组件的数据绑定起来。这里我用 isOpen 变量绑定它：

<template>
  <inner-component :open='isOpen'></inner-component>
</template>

<script>
import InnerComponent from '@/components/InnerComponent.vue'

export default {
  name: 'MyList',
  data() {
    return {
      isOpen: false
    }
  },
  components:{InnerComponent}
}
</script>

然后在你的测试中，当你想改变子组件中open 属性的值时，你可以只改变isOpen的值：

    wrapper.setData({isOpen:true})

在 Vue 中设置包装器对象的子组件的道具

Setting the props of a child component of a wrapper object in Vue

jestjs

vue-component

vuejs2

vue-test-utils