How to test a Vue component against console errors?

Question

The concept of testing Vue/Js is new to me,so bear with me. Normally if there are errors related to the Vue component I can see them in the browser console.

for example if I have a Vue component:

<template>
    <div>
        {{ number }}
    </div>
</template>

<script>
export default {}
</script>

I will see an error like this: [Vue warn]: Property or method "number" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Now when I want to test a specific component using test tools, how can I check for these kind of errors, I want to make sure that the component is loaded without these errors.

Today I tried using Jset to test this, and I ended up with this:

import { mount } from '@vue/test-utils'
import Component from '../Components/Example.vue'

test('it renders without errors', () => {
    const wrapper = mount(Component)
    expect(wrapper.isVueInstance()).toBe(true);
})

but, that doesn't do it since it will always return true even though 'number' is not defined. How can I check if the component has loaded without console errors.

Answer 1

This is not an error but warning, this is the reason why the component renders.

A proper testing strategy is to test the behaviour because that the framework doesn't cause warnings doesn't mean that a unit works correctly. A suite with full code coverage won't cause such warnings without a fail.

console.error calls can be additionally spied to strengthen the test but in this case this is entirely redundant:

spyOn(console, 'error');
const wrapper = mount(Component);
expect(wrapper.find('div').text()).toContain('123456'); // easier to do with a snapshot
expect(console.error).not.toHaveBeenCalled();

Notice that console and some other built-in methods should be spied and mocked with care because they interfere with testing framework's error reporting.