时间戳

首页 > 解决方案 > 在Vue中设置包装对象的子组件的道具

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

问题描述

我正在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>

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

我的测试：

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

这似乎确实设置了道具，但我的测试仍然出现错误。

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

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

标签： vuejs2jestjsvue-componentvue-test-utils

解决方案

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

例如

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

推荐阅读