浅层安装组件时无法定位 v-btn

Posted 2023-02-22

【中文标题】浅层安装组件时无法定位 v-btn

【英文标题】：Can't locate v-btn while shallow mounting a component

【发布时间】：2019-09-07 20:49:21

【问题描述】：

我在 vuetify 中创建了一个项目，现在尝试使用 jest 对其进行单元测试。 我有一个使用 v-btn 创建的按钮，它可以切换布尔变量的值。

为了检查按钮是否被点击，我尝试使用我给 v-btn 的类名来获取按钮，但它不起作用

我尝试过使用浅安装和普通安装。我试图捕获标签（v-btn）本身，但它不起作用

一些.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 |   );

我该怎么办？我有很多这样的按钮需要测试，但我什么都试过了。

【参考方案1】：

找到解决方案！

我用 true 断言 wrapper.find('.profile-button') 的值。

应该改为：

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

(wrapper.find('.profile-button').exists()) 返回一个布尔值，这是我们要断言的值。