Пересмешив параметры $ $ для компонента VueJs в Nuxt - PullRequest
Новая
       4

Пересмешив параметры $ $ для компонента VueJs в Nuxt

0 голосов
/ 10 апреля 2020

Я ссылаюсь на параметры маршрутизатора для установки класса в Vue компоненте: 

<template>
  <div class="m-2">
    <button
      class="capitalize relative border-2 hover:border-red-500 text-grey-500 p-6 rounded font-bold overflow-visible"
      :class="activeFilterClass"
    >
      {{ label }}
      <div
        class="absolute top-0 right-0 -mt-2 -mr-2 px-3 py-1 text-white bg-red-500 rounded-full"
      >
        {{ count }}
      </div>
    </button>
  </div>
</template>

<script>
export default {
  name: 'FilterItem',
  props: {
    label: {
      type: String,
      default: 'label'
    },
    count: {
      type: Number,
      default: 0
    }
  },
  computed: {
    activeFilterClass() {
      return this.$route.params.category === this.label
        ? 'border-red-500'
        : 'border-blue-500'
    }
  }
}
</script>

Когда я пытаюсь смоделировать $router в модульном тесте, он выдает: TypeError: Cannot read property 'params' of undefined

Я так издеваюсь в соответствии с документами, но не могу понять, как запустить тест: 

  let wrapper
  const route = {
    path: '/products',
    params: {
      category: 'filter'
    }
  }

  beforeEach(() => {
    wrapper = shallowMount(FilterItem, {
      mocks: {
        $route: route
      }
    })
  })
...