2

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
Overdrivr
  • 6,296
  • 5
  • 44
  • 70
  • 1
    maybe this helps: https://stackoverflow.com/questions/41458736/how-to-write-test-that-mocks-the-route-object-in-vue-components – escapedcat Feb 22 '18 at 07:29

0 Answers0