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 ?

Answer 1

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