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

Question

Как я могу заглушить определенные методы (в частности, геттеры) из Vue отдельных файловых компонентов для модульного тестирования с mocha / ожидаемо?

Проблема, с которой я столкнулся, заключалась в следующем: у меня есть компонент с метод get someData

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import SomeService from '@/services/some.service'

@Component()
export default class MyApp extends Vue {
    ...

    mounted () {
      ...
    }

    get someData () {
      return this.$route.path.split('/')[1] || 'main'
    }

    get getLocation () {
      return this.someService.getBaseURL()
    }

    initSomeStringProperty (): string {
      return 'some string'
    }
}
</script>

Мои тесты всегда терпят неудачу с:

[Vue warn]: Ошибка при рендеринге: "Ошибка типа: Ошибка чтения свойство 'path' of undefined "

Когда я пытаюсь заглушить метод с помощью sinon, например:

describe('MyApp.vue', () => {
  if('returns main', () => {
    const dataStub = sinon.stub(MyApp, 'someData')
    listStub.yields(undefined, 'main')
    const wrapper = shallowMount(AppNavBar)
    expect(wrapper.text()).to.include('Some Content')
  })
})

Однако я получаю следующую ошибку:

TypeError: Невозможно заглушить несуществующее собственное свойство someData

Кроме того, я получаю ту же ошибку для любого другого метода, который я хочу аналогично заглушить, например, initSomeStringProperty ().

Answer 1

Вы можете установить вычисленные реквизиты и методы компонента при монтировании :

const wrapper = shallowMount(MyApp, {
  computed: {
    someData: () => 'foo'
  },
  methods: {
    initSomeStringProperty: () => 'bar'
  }
})
expect(wrapper.vm.someData).to.equal('foo')
expect(wrapper.vm.initSomeStringProperty()).to.equal('bar')

Если бы вы просто пытались избежать ошибки о том, что $route не определен, вы могли бы макет $route при монтаже :

const wrapper = shallowMount(MyApp, {
  mocks: {
    $route: { path: '/home' }
  }
})
expect(wrapper.vm.someData).to.equal('home')

Answer 2

В приведенном выше коде someData является вычисляемым свойством, которое определяется с помощью метода доступа к свойству через vue-property-decorator.

. Его можно указать в двух точках, либо в прототипе класса:

sinon.stub(MyApp.prototype, 'someData').get(() => 'foo');

Или варианты компонентов:

sinon.stub(MyApp.options.computed.someData, 'get').value('foo');