Question

我在vue-test-utils中使用jest，在登录组件中呈现了路由器链接。我也将路由器传递给组件。

有一个名为“电子邮件”的数据，其更新忘记了获取的链接的更新。

通过单元测试进行检查。

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();
    })
  })

我正在使用以下代码创建包装器：

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

更新组件数据然后检查重新渲染的组件的正确方法是什么？

Answer 1

尝试使用async / await，例如：


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')
})

在此处查看示例https://developer.mozilla.org/en-US/docs/Web/API/Worker

vue-test-utils的setData不重新更新组件

1 个答案: