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

为了等到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()
  })
})

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

1 个答案: