I have a Vue.js component that has different behavior according to the $route.params
or $route.query
. Something like:
<template>
<div class="hello">
{{query}}
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
}
}
},
computed: {
'query': () => {
return $route.params.query
}
}
}
</script>
How can I write a unit test spec where I can programmatically set the value of $route.params
or $route.query
?
Something like this:
import Vue from 'vue'
import Template from '@/components/Template'
describe('Template.vue', () => {
it('should render according to query', () => {
const Constructor = Vue.extend(Script)
const vm = new Constructor()
vm.$route = { // THIS DOES NOT WORK
params: {
id: 1
}
}
vm.$mount()
// Test contents
})
})
Fails with
setting a property that has only a getter