3

我的组件具有以下计算代码：

textButton() {
    const key = this.$root.feature.name === //...
    // ...
},

现在我正拼命地在我的测试中模拟“root”，但我只是不知道如何。有小费吗？

4

4 回答 4

5

Vue 测试工具为您提供了在挂载（或浅挂载）组件时注入模拟的能力。

const $root = 'some test value or jasmine spy'

let wrapper = shallow(ComponentToTest, {
  mocks: { $root }
})

这应该很容易测试。希望有帮助

于 2018-03-23T11:13:32.400 回答
4

有两种方法可以使用vue-test-utils.

如上所述，一种方法是使用mocks安装选项。

const wrapper = shallowMount(Foo, {
  mocks: {
    $root: { 
      feature: { 
        name: "Some Val" 
      }
    }
  }
})

但是在您的情况下，您可能希望使用计算的安装选项，它比mocks.

const wrapper = shallowMount(Foo, {
  computed: {
    textButton: () => "Some Value"
  }
})

希望这会有所帮助！

如果您有兴趣，我将在此处编写有关如何测试 Vue 组件的简单指南集合。它正在开发中，但如果您需要其他相关方面的帮助来测试 Vue 组件，请随时提出问题。

于 2018-07-07T10:06:44.073 回答
4

来自https://github.com/vuejs/vue-test-utils/issues/481#issuecomment-423716430的解决方案：

您可以直接在虚拟机上设置 $root ：

wrapper.vm.$root = { loading: true }
wrapper.vm.$forceUpdate()

或者，您可以使用 parentComponent 安装选项传入父组件。在 VTU 中，括号将是 $root：

const Parent = {
  data() {
    return {
      loading: "asdas"
    }
  }
}
const wrapper = shallowMount(TestComponent, {
  parentComponent: Parent
})
于 2018-11-09T13:46:06.000 回答
2

您可以在测试中使用 Vue 插件将模拟数据注入其中localVue，以便您的组件可以访问它。

import {createLocalVue, shallow} from '@vue/test-utils';

const localVue = createLocalVue();

localVue.use((Vue) => {
  Vue.prototype.feature = {
    name: 'Fake news!'
  };
});

let wrapper = shallow(Component, {
  localVue
});

前段时间我也遇到过同样的问题，我得出的结论是，访问this.$root可能表明您必须进一步改进与组件通信的方式。考虑使用插件结构来定义全局可用的属性和方法，而不仅仅是在测试中。Mixins 也可能会有所帮助。

于 2018-03-23T10:43:38.070 回答