ErrorWrapper is returned only in wrapper.find. I think there is no benefit of using it over returning null.
wrapper.find returns null (or undefined) when no item is found, similarly to #Array.prototype.find
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);
Most helpful comment
I've found it difficult to agree with this. Let's say you have spec:
When this spec fails, you'll get output like for example:
After remove ErrorWrapper it would be:
I don't see why
find did not return .item, cannot call text() on empty Wrappermessage may be helpful for developer to debug why spec fails.