时间戳

首页 > 解决方案 > 如何为单元测试存根 Vue 组件方法

unit-testing - 如何为单元测试存根 Vue 组件方法

问题描述

如何从 Vue 单文件组件中存根某些方法（特别是 getter）以使用 mocha/expect 进行单元测试？

我面临的问题如下：我有一个带有 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 警告]：渲染错误：“TypeError：无法读取未定义的属性‘路径’”

当我尝试使用 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()。

标签： unit-testingvue.jsmocha.jssinon

解决方案

在上面的代码someData中是通过属性访问器定义的计算属性vue-property-decorator。

它可以在两个点上存根，或者在类原型上：

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

或组件选项：

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

推荐阅读