Могу ли я выбрать элемент по ссылке, используя утилиты vue test

Question

Если у меня есть изображение

<img class="pineapple" ref="pineapple" src="pineapple.jpg" />

Могу ли я использовать $ ref

expect(wrapper.find($refs.pineapple).exists()).toBe(true)

вместо

expect(wrapper.find('.pineapple').exists()).toBe(true)

Answer 1

Вы можете передать объект в wrapper.find с помощью свойства ref.

expect(wrapper.find({ref: 'pineapple'}).exists()).toBe(true)

---

Из документации Vue Test:

Найти параметр объекта

Ref

Используя объект опции поиска, Vue Test Utils позволяет выбирать элементы с помощью $ ref для компонентов оболочки.

const buttonWrapper = wrapper.find({ ref: 'myButton' })
buttonWrapper.trigger('click')

https://vue -test-utils.vuejs.org / апи / selectors.html

Answer 2

Здесь у вас есть отличный пример :

var Approvals = {
  props: ['someContent'],
  components: {
    'vue-toast': VueToast
  },
  methods: {
    showToast() {
      const toast = this.$refs.toast;
      toast.showToast(this.someContent);
    }
  },
  mounted() {
    console.log(this.$refs);
    this.$refs.toast.setOptions({
      maxToasts: 3,
      position: 'bottom right'
    });
  }
}

// specs code
describe('Approvals page', () => {
    const wrapper = shallow(Approvals);

    it('any test', () => {
        expect(wrapper).toBeDefined();
    });
});

Источник .