setData of vue-test-utils not re-updating the component

Question

I'm using vue-test-utils with jest, I have router-link being rendered in a Login Component. I'm passing router to the component as well.

There is data called 'email', on its update forgot link get's updated.

Following unit-test checks that.

it("updates forgot password link correctly", done => {
    wrapper.setData({
      user: {
        email: '[email protected]',
        password: '',
      }
    });
    Vue.nextTick(() => {
      expect(wrapper.find('a').element.href).toEqual('/forgot-password/[email protected]');
      done();
    })
  })

I'm creating wrapper using following code:

const wrapper = mount(LoginComponent, {
    localVue,
    sync: false,
    stubs: {
      RouterLink: RouterLinkStub,
    },
    mocks: {
      $route: {
        path: "/login",
        meta: {
          signout: false
        }
      }
    }
  });

What is the correct way to update component data and then check the re-rendered component ?

Did you find a solution to this?

joshpj1
– joshpj1

2019-12-03 13:34:49 +00:00
Commented Dec 3, 2019 at 13:34 — joshpj1
– joshpj1, Commented Dec 3, 2019 at 13:34
@joshpj1as far as I remember no I was not able to find it.

Farhan Tahir
– Farhan Tahir

2019-12-03 14:33:34 +00:00
Commented Dec 3, 2019 at 14:33 — Farhan Tahir
– Farhan Tahir, Commented Dec 3, 2019 at 14:33

huyttq · Accepted Answer · 2020-06-10 10:52:11Z

2

Try to use async/await , for ex:


it('blah blah', async () => {
  wrapper.setData({
      user: {
        email: '[email protected]',
        password: '',
      }
    });

  await Vue.nextTick()

  expect(wrapper.find('a').element.href).toEqual('/forgot-password/[email protected]')
})

see example here https://vue-test-utils.vuejs.org/guides/testing-async-components.html

answered Jun 10, 2020 at 10:52

huyttq

212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

setData of vue-test-utils not re-updating the component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related