Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

172
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda