为什么 $nextTick 中的期望永远不会失败？

Question

我需要使用它$nextTick来测试我的程序的某些部分。不知何故，它打破了我的测试并使它们始终成功 - 即使它们应该失败。

最小的测试样本如下所示：

import App from "./App";
import { shallowMount } from "@vue/test-utils";

it("should fail", () => {
    const wrapper = shallowMount(App);
    wrapper.vm.$nextTick(() => {
        expect(1).toBe(3);
        done();
    });
});

您可以在此处找到沙箱示例

如果打开控制台，您应该会发现以下错误消息：

[Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected)
Error: expect(received).toBe(expected)

为什么测试成功？为什么错误会被忽略？如果有这样的$nextTick注释，我该如何正确使用？

Answer 1

为了在数据更改后等到 Vue.js 完成更新 DOM，您可以在数据更改后立即使用 Vue.nextTick(callback)。回调将在 DOM 更新后被调用。

我在你的测试中看不到任何改变 DOM 的触发器。并且您错过了done测试回调中的参数

例如下面是wrapper.find('button').trigger('click')

it('fetches async when a button is clicked', (done) => {
  const wrapper = shallowMount(Foo)
  wrapper.find('button').trigger('click')
  wrapper.vm.$nextTick(() => {
    expect(wrapper.vm.value).toBe('value')
    done()
  })
})