Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

183
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!