vue-test-utils 的 setData 没有重新更新组件答案

【问题标题】：setData of vue-test-utils not re-updating the componentvue-test-utils 的 setData 没有重新更新组件
【发布时间】：2019-09-10 11:40:23
【问题描述】：

我正在使用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
        }
      }
    }
  });

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

【问题讨论】：

您找到解决方案了吗？
@joshpj1据我记得不，我找不到它。

标签： unit-testing vue.js vue-test-utils

【解决方案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://vue-test-utils.vuejs.org/guides/testing-async-components.html

【讨论】：