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

【问题标题】：Why does an expectation in $nextTick never fail?为什么 $nextTick 中的期望永远不会失败？
【发布时间】：2019-05-25 10:44:48
【问题描述】：

我需要使用$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？

【问题讨论】：

标签： vue.js jestjs vue-test-utils

【解决方案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()
  })
})

【讨论】：

我试图达到同样的目的，但我得到了同样的错误：wrapper.vm.getServerInfo(); wrapper.vm.$nextTick(() => { expect(wrapper.vm.myKeyManager).toBe(null); done(); });