Не удается найти v-btn при неглубокой установке компонента

Я создал проект в vuetify и теперь пытаюсь протестировать его с помощью jest. У меня есть кнопка, которую я создал с помощью v-btn, которая переключает значение логической переменной.

Чтобы проверить, была ли нажата кнопка, я попытался удержать кнопку, используя имя класса, которое я дал v-btn, но оно не работает

Я пробовал использовать неглубокий монтаж и простой монтаж. Я попытался захватить сам тег (v-btn), но это не сработало

some.vue

<template>
 <div>
  <v-btn class="profile-button" @click="isProfile = !isProfile">Profile</v-btn>
  <v-btn icon color="#fff" class="expand" small fab absolute right @click="mini = !mini">
     <v-icon color="#fcbc00">chevron_right</v-icon>
  </v-btn>
 </div>
</template>

<script>
  export default {
   data() {
    return {
     isProfile: true,
     mini: true
    }
   }
  }
</script>

some.spec.js

 import { shallowMount } from '@vue/test-utils';
 import Profile from '@/components/Profile.vue';
 import Vue from 'vue'
 import Vuetify from 'vuetify'

 describe('Profile.vue', () => {

  Vue.use(Vuetify)

  it('Profile is a vue instance', () => {
    const wrapper = shallowMount(Profile);
    expect(wrapper.isVueInstance()).toBeTruthy()
  });

  it('Profile Button exists', () => {
    const wrapper = shallowMount(Profile);
    expect(wrapper.contains('.profile-button')).toBe(true)
  });

  it('Profile Button is clicked', () => {
    const wrapper = shallowMount(Profile);
    expect(wrapper.contains('.profile-button')).trigger('click')
  });

  it('Has an expand button', () => {
   const wrapper = shallowMount(Profile)
   wrapper.find('expand').trigger('click')
})

});

Все тесты надо сдать. Но я получаю следующую ошибку:

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  19 |     
  20 |     it('Profile Button exists', () => {
> 21 |       expect(wrapper.contains('.profile-button')).toBe(true)
     |                                                   ^
  22 |     })


[vue-test-utils]: find did not return expand, cannot call trigger() 
 on empty Wrapper

  16 |     it('Has an expand button', () => {
  17 |       const wrapper = shallowMount(SideDrawer)
> 18 |       wrapper.find('expand').trigger('click')
     |                              ^
  19 |     })
  20 |   });

Что я должен делать? У меня много таких кнопок, которые нужно протестировать, и я застрял, так как все перепробовал.


person Rahul Sharma    schedule 17.04.2019    source источник


Ответы (1)


Есть решение!

Я утверждал значение wrapper.find ('. Profile-button') как истину.

Его следует изменить на:

(wrapper.find('.profile-button').exists()).toBe(true)

(wrapper.find ('. profile-button'). exists ()) возвращает логическое значение, которое мы хотим подтвердить.

person Rahul Sharma    schedule 18.09.2019