为什么 $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()
  })
})

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

Why does an expectation in $nextTick never fail?

vue.js

jestjs

vue-test-utils