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

Question

如何从 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: Cannot read property '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

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

它可以在两个点被存根，无论是在类原型上：

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

或组件选项：

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

Answer 2

您可以设置组件的computed props and methods upon mounting，如下图所示。 更新：从 1.x 开始，设置方法已被 deprecated 支持存根（请参阅 @EstusFlask's answer，了解如何正确使用 Sinon 存根）。

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 未定义的错误，你可以mock $route upon mounting：

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