I am getting ready to test a specific behavior in a Vue component that only occurs when the props are changed. The Vue component I'm working with looks similar to this example, and the key logic for the test is contained within the watcher.
<script>
export default {
components: {
},
props: {
exampleProp: {
type: Boolean,
required: false,
default: false,
}
},
watch: {
exampleProp: function(newVal, oldVal) {
// Logic that needs testing
},
}
};
</script>
<template>
<h1>hello world</h1>
</template>
When following the approach below, the test logic runs smoothly.
it('example test', done => {
let wrapper = mount(exampleComponent, {
propsData: {
},
template: `
<example-component >
</example-component>
`
});
wrapper.setProps({
isSubmitting: true
});
});
The watcher is invoked and ready for testing, everything seems fine.
However, as the test is intended to be integrated into a test suite, there are some limitations. The component is not mounted directly, but rather the instance of it like so:
it('example test', done => {
let wrapper = new Vue({
components: {
exampleComponent,
},
template: `
<example-component></example-component>
`,
}).$mount();
// How can I update the props now?
// 'wrapper.setProps' and 'wrapper.$setProps' are both undefined
});
My goal is to find a way to update the props of the component instance in order to trigger the watcher's execution. Any suggestions on how to achieve this?