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

171
Vistas
How to update value with emit in computed with setter VUE + JEST

Hi I have a component that gets the prop "access" and a computed property into a setter when access changes I call this.$emit('update:access', val) which updates the property in the parent via :access.sync="access". The problem is that my tests break when it needs to change this property.

If I use wrapper.setData({ accessComputed: 2 }) nothing updated If I use wrapper.setData({ access: 2 }) I have error with mutation props Maybe it's related to .sync? I will be grateful for any help

child component

  props:{
        access:{
          type: Number,
          required: true
        },
      },
      computed:{
        accessComputed:{
          get() {
            return this.access
          },
          set(val) {
            this.$emit('update:access', val)
          }
        },
      },
methods:{
    changeTypeAccess(){
      this.$nextTick(() => {
        switch (this.accessComputed){
          case 2:
            this.generatePassword()
            break;
          case 3:
            this.generateLink()
            break;
        }
      });
    }
}

parent

 <AccessType
             :access.sync="access"
          />

test spec

import { shallowMount, createLocalVue } from "@vue/test-utils"
import AccessType from '../../assets/components/AccessType'

const localVue = createLocalVue()

describe('testing access type component', () => {
    let wrapper;
    beforeEach(() => {
        wrapper = shallowMount(AccessType, {
            localVue,
            propsData: {
                access: 1,
            },
            computed: {
                accessComputed:{
                    get() {
                        return this.access;
                    },
                    set(val) {
                        this.$emit('update:password', val)
                    }
                },
            }
        })
    });

    test('test call diff methods by change type access', async () => {
        let generatePasswordSpy = jest.spyOn(wrapper.vm, 'generatePassword')
        let generateLinkSpy = jest.spyOn(wrapper.vm, 'generateLink')

        wrapper.setData({ accessComputed: 2 })
        wrapper.vm.changeTypeAccess()
        await wrapper.vm.$nextTick()
        expect(generatePasswordSpy).toHaveBeenCalled()

        wrapper.setData({ access: 3 })
        wrapper.vm.changeTypeAccess()
        await wrapper.vm.$nextTick()
        expect(generateLinkSpy).toHaveBeenCalled()
    })
})
about 4 years ago · Juan Pablo Isaza
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