Skip to content

2.0.0-rc.6 Poor error handling with promises & empty wrapper  #638

@Giwayume

Description

@Giwayume

Subject of the issue

If I resolve an empty DOMWrapper as the return value of a promise, which is then awaited by an async function, get this error:

Cannot call then on an empty DOMWrapper.

Steps to reproduce

import { defineComponent, nextTick } from 'vue';
import { mount } from '@vue/test-utils';

async function findAfterNextTick(wrapper, selector) {
    await nextTick();
    return wrapper.find(selector);
}

it('some test', async () => {
    const wrapper = mount(
        defineComponent({
            template: `<div>My component</div>`
        })
    );
    const foundElement = await findAfterNextTick(wrapper, '.something-that-does-not-exist');
    expect(foundElement.exists()).toBeFalsy();
});

Expected behaviour

The test above should pass.

Actual behaviour

Getting this error.

Cannot call then on an empty DOMWrapper.

Possible Solution

This is way too generic.
https://github.com/vuejs/vue-test-utils-next/blob/ecf7905fd36a707174421f5c58b57e000faaf3e0/src/errorWrapper.ts#L11

I'm assuming nodejs is testing if the returned object is thenable, which causes this error. Fix so it's only checking for wrapper properties, just like V1 of @vue/test-utils. Denying all properties is going to lead to weird bugs like this. It may be nice for brevity in your codebase, but it wasn't a smart change.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions