Vue-test-utils: Remove ErrorWrapper

Created on 19 May 2018  路  5Comments  路  Source: vuejs/vue-test-utils

What problem does this feature solve?

ErrorWrapper is returned only in wrapper.find. I think there is no benefit of using it over returning null.

What does the proposed API look like?

wrapper.find returns null (or undefined) when no item is found, similarly to #Array.prototype.find

Most helpful comment

I've found it difficult to agree with this. Let's say you have spec:

it('should have correct title', () => {
    expect(wrapper.find('.item').text()).to.equal('Example title');
});

When this spec fails, you'll get output like for example:

some-component
    should have correct title
       Error: [vue-test-utils]: find did not return .item, cannot call text() on empty Wrapper
         at components/some-component.spec.js:25:15

After remove ErrorWrapper it would be:

it('should have correct title', () => {
    expect(wrapper.find('.item').text()).to.equal('Example title');
});
------------------------------------------------------------------------------
some-component
    should have correct title
       Error: Uncaught TypeError: Cannot read property 'text' of null
         at components/some-component.spec.js:25:15

I don't see why find did not return .item, cannot call text() on empty Wrapper message may be helpful for developer to debug why spec fails.

All 5 comments

The benefit of an ErrorWrapper is to handle errors where find or findAll are unsuccessful, so that users get clear error messages, instead of type errors.

There is already a way to check that an element doesn't exist, using the exists method.

I don't see the benefit of returning null, when we can handle the error for users instead.

It's worth noting that find is not based on the Array.prototype.find method. It is similar to jQuery find, or enzyme find, which don't return null.

I don't see big advantage of

expect(wrapper.find('.item').exists()).to.be.true

over

expect(wrapper.find('.item')).to.not.be.null

From the other site everytime you want to add method to Wrapper you need to add appropriate method to ErrorWrapper, I think it's inconvenient and a bit harder to maintain.

The benefit is the error handling. It's the difference between:

Uncaught TypeError: Cannot read property 'trigger' of null

and:

find did not return .some-class, cannot call trigger() on empty Wrapper

I've found it difficult to agree with this. Let's say you have spec:

it('should have correct title', () => {
    expect(wrapper.find('.item').text()).to.equal('Example title');
});

When this spec fails, you'll get output like for example:

some-component
    should have correct title
       Error: [vue-test-utils]: find did not return .item, cannot call text() on empty Wrapper
         at components/some-component.spec.js:25:15

After remove ErrorWrapper it would be:

it('should have correct title', () => {
    expect(wrapper.find('.item').text()).to.equal('Example title');
});
------------------------------------------------------------------------------
some-component
    should have correct title
       Error: Uncaught TypeError: Cannot read property 'text' of null
         at components/some-component.spec.js:25:15

I don't see why find did not return .item, cannot call text() on empty Wrapper message may be helpful for developer to debug why spec fails.

Works for me:

const DOM = wrapper.find("#id");
expect(DOM.exists()).toBe(false);
Was this page helpful?
0 / 5 - 0 ratings

Related issues

38elements picture 38elements  路  3Comments

vilarinholeo picture vilarinholeo  路  3Comments

jonyoder picture jonyoder  路  3Comments

alexanderstudte picture alexanderstudte  路  3Comments

vwxyutarooo picture vwxyutarooo  路  3Comments