Установка реквизитов дочернего компонента объекта-оболочки в Vue - PullRequest
Новая
       20

Установка реквизитов дочернего компонента объекта-оболочки в Vue

0 голосов
/ 17 октября 2019

Я пишу несколько тестов, используя 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>

Теперь тест, который я пишу, проверяет наличие div в inner-component, когда для open установлено значение true, но по умолчанию установлено false. Мне нужен способ установить реквизит этого дочернего компонента перед его тестированием.

Мой тест: 

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, а затем мои тесты прошли, поэтому я не думаю, что я проверяю.

Если кто-то может определить, почему это не работает, или знает, как лучше это сделать, пожалуйста, дайте мне знать!

Ответы [ 2 ]

2 голосов
/ 17 октября 2019

Согласно руководству :

vm. $ Options

Опции создания экземпляров, используемые для текущего экземпляра Vue.

Таким образом, $options - это не то, что мы пишем в props.

Используйте $props для установки свойства для дочернего компонента: 

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

Но этот путь приводит к предупреждению:

Старайтесь не менять объект напрямую, поскольку значение будет перезаписываться всякий раз, когда родительский компонент будет перерисовываться. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита.

Итак, давайте следуем совету и связываем свойство дочернего компонента с данными родительского компонента. Здесь я связываю его с переменной 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>

Затем в своем тесте вы можете просто изменить значение isOpen, если хотите изменить значение свойства open в дочернем компоненте: 

    wrapper.setData({isOpen:true})
0 голосов
/ 17 октября 2019

С vue-test-util вы можете использовать методы setProps из оболочки, проверьте соответствующие документы здесь

Например 

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