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

Posted 2023-02-23

【中文标题】vue-test-utils 的 setData 没有重新更新组件

【英文标题】：setData of vue-test-utils not re-updating the component

【发布时间】：2019-09-10 11:40:23

【问题描述】：

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

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

以下单元测试检查。

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

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

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

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

【问题讨论】：

您找到解决方案了吗？

@joshpj1据我记得不，我找不到它。

【参考方案1】：

尝试使用 async/await ，例如：

it('blah blah', async () => 
  wrapper.setData(
      user: 
        email: '[e-mail]',
        password: '',
      
    );

  await Vue.nextTick()

  expect(wrapper.find('a').element.href).toEqual('/forgot-password/?email=[e-mail]')
)

在此处查看示例https://vue-test-utils.vuejs.org/guides/testing-async-components.html