vue.js - 为什么 $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();
    });
});

您可以找到一个沙箱示例 here

如果您打开控制台，您应该会看到以下错误消息:

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

为什么测试成功？为什么忽略错误？如果注意 like so，我该如何正确使用 $nextTick ？

Answer 1

In order to wait until Vue.js has finished updating the DOM after a data change, you can use Vue.nextTick(callback) immediately after the data is changed. The callback will be called after the DOM has been updated.

我在您的测试中看不到任何更改 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()
  })
})