Vue组件Jest单元测试失败，setData设置值后不生效如何解决？

Vue的DOM更新采用异步队列机制，修改data后视图不会立刻同步更新。你在调用wrapper.setData后立刻执行断言，此时登出按钮的v-show判断还没生效，DOM仍处于隐藏状态，所以断言返回false，不属于setData用法错误。

把第二个测试用例改为异步逻辑，等待setData执行完成后再做断言：

test("show button when user is logged in", async () => {
  const wrapper = mount(AppHeader);
  // 等待setData执行完成，DOM更新后再执行断言
  await wrapper.setData({ loggedIn: true });
  expect(wrapper.find("button").isVisible()).toBe(true);
});

补充说明：

• setData方法本身返回Promise，用await等待后即可确保DOM已经完成更新，此时再判断元素可见性即可得到正确结果。
• 你也可以选择等待nextTick实现相同效果，写法如下：

test("show button when user is logged in", async () => {
  const wrapper = mount(AppHeader);
  wrapper.setData({ loggedIn: true });
  await wrapper.vm.$nextTick();
  expect(wrapper.find("button").isVisible()).toBe(true);
});

内容的提问来源于stack exchange，提问作者Maxime