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: 'a@a.com',
        password: '',
      }
    });
    Vue.nextTick(() => {
      expect(wrapper.find('a').element.href).toEqual('/forgot-password/?email=a@a.com');
      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 Dec 03 '19 at 13:34 — joshpj1, Dec 03 '19 at 13:34
@joshpj1as far as I remember no I was not able to find it. – Farhan Tahir Dec 03 '19 at 14:33 — Farhan Tahir, Dec 03 '19 at 14:33

score 2 · Answer 1 · answered Jun 10 '20 at 10:52

Try to use async/await , for ex:


it('blah blah', async () => {
  wrapper.setData({
      user: {
        email: 'a@a.com',
        password: '',
      }
    });

  await Vue.nextTick()

  expect(wrapper.find('a').element.href).toEqual('/forgot-password/?email=a@a.com')
})

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

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

1 Answers1