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：无法读取未定义的属性'path'”

当我尝试使用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赞成使用存根设置方法（有关如何与Sinon正确存根的信息，请参见@EstusFlask's answer）。 >

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')

如何使用Vue组件方法进行单元测试

2 个答案: