vendredi 21 février 2020

How to test a Vue component against console errors?

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>
        
    </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.

Aucun commentaire:

Enregistrer un commentaire