Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

229
Vistas
Unit Testing Vue with Jest and Vue Test Utils

I'm brand new at Unit Testing with vue. I'm trying to unit test a navigation vue component. I started out easy, I just wanted to test a method that just makes a boolean false(triggered by an on click). I am also using vuetify. I somewhat managed to mimic a button and then my hope is that the variable I'm passing (showLoginDrawer) returns false in my unit test. My error is TypeError: _vm.is.has is not a function which relates to a different part of my code, I think I'm missing something but I couldn't find anything online about it.

Below I've included the component and my testing file.

//Nav.vue
<template>
  <v-btn
        :to="{ name: 'home' }"
        aria-label="Home button"
        @click="hideDiv()"
   >
   </v-btn>

      <div>
        <transition name="nav-fade">
          <component v-bind:is="drawerSection"></component>
        </transition>
      </div>

</template>
<script>
     data() {
      return {
        drawerSection: function () {
          if (this.is.has('learning')) {
            return 'nav-learning'
          } else {
            return 'nav-explore'
          }
        },
      }
    },
    methods: {
      hideDiv() {
        if (!this.appState.restrictedAccessAlert)
          this.appState.showLoginDrawer = false
      }
}
</script>
<style>//disregard</style>

//Nav.spec.js
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import { shallowMount, mount } from '@vue/test-utils'
import Nav from '@/components/Nav'


const localVue = createLocalVue()
localVue.use(Vuetify)
localVue.use(Vuex)

describe('Testing Nav component', () => {
    let vuetify
    beforeEach(() => {
      vuetify = new Vuetify()
    })
    test('Test Button click when logged out', () => {
    const wrapper = mount(Navigation, {
      data() {
        return {
          appState: {
            showLoginDrawer: true,
            lastCapabilityPath: '',
            restrictedAccessAlert: false,
          },
          is: 'learning',
          localVue,
          vuetify,
        }
      },
    })

    const event = jest.fn()
    const button = wrapper.findAll('.v-btn').at(0)
    expect(button.text()).toContain('My Profile')

    button.vm.$on('click', event)
    expect(event).toHaveBeenCalledTimes(0)
    expect(wrapper.vm.showLoginDrawer).toBeTruthy()
    button.trigger('click')
    expect(event).toHaveBeenCalledTimes(1)
    expect(wrapper.vm.showLoginDrawer).toBeFalsy()
  })
})

I get the error:

TypeError: _vm.is.has is not a function

Thank you for any help!

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Oh my mistake was that has() is a set function thus it won't work with a string so I had to make it equal to a set.

Updated code:

  test('Test Basic HTML rendering', () => {
    const is = new Set(['learning', 'b', 'c'])

    const wrapper = mount(Navigation, {
      data() {
        return {
          appState: {
            showLoginDrawer: true,
            lastCapabilityPath: '',
            restrictedAccessAlert: false,
          },
          is,
          localVue,
          vuetify,
        }
      },
    })
    wrapper.vm.$vuetify.breakpoint.smAndUp = true
    expect(wrapper.html()).toContain('Log-in')
    // check the name of the component
    expect(wrapper.vm.$options.name).toMatch('NavProfile')
  })
about 4 years ago · Juan Pablo Isaza Denunciar

0

Please try use async & await, maybe every event call is asynchronous

describe('Testing Nav component', () => {
    let vuetify
    beforeEach(() => {
        vuetify = new Vuetify()
    })

    test('Test Button click when logged out', async () => { // use async
        const wrapper = mount(Navigation, {
            data() {
                return {
                    appState: {
                        showLoginDrawer: true,
                        lastCapabilityPath: '',
                        restrictedAccessAlert: false,
                    },
                    is: 'learning',
                    localVue,
                    vuetify,
                }
            },
        })

        const event = jest.fn()
        const button = wrapper.findAll('.v-btn').at(0)
        expect(button.text()).toContain('My Profile')

        button.vm.$on('click', event)
        expect(event).toHaveBeenCalledTimes(0)
        expect(wrapper.vm.showLoginDrawer).toBeTruthy()

        // Try use await at every event
        await button.trigger('click')
        expect(event).toHaveBeenCalledTimes(1)
        expect(wrapper.vm.showLoginDrawer).toBeFalsy()
    })
})
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda