Why does an expectation in $nextTick never fail?

user_8993709 0
Viewed 747

I need to use $nextTick in order to test some parts of my program. Somehow, it breaks my tests and make them success all the time - even when they should fail.

A minimal test sample would look like this:

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();
    });
});

You can find a sandbox example here

If you open the console, you should find the following error messages:

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

Why does the test success? Why are the errors ignored? How do I use $nextTick properly if note like so?

vue-test-utils vue.js jestjs
1 Answers

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.

I can not see any trigger that change DOM in your test. And you missed done argument in test callback

For example in the following this is 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()
  })
})
user_104908570
Related