Question

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

if let tempCurrentLocation = currentLocation {
     if case tempCurrentLocation = Location.ontop {
          print("Currently ontop")
          location = .ontop
     } else {
          print("Currently NOT ontop")
          location = .inside
     }
} else {
     print("Not able to unwrap enum...")
}

现在我正在拼命试图在我的测试中模仿“root”，但我只是不知道如何。有什么提示吗？

Answer 1

Vue test utils为您提供了在安装（或浅装）组件时注入模拟的能力。

＆＃13;

const $root = 'some test value or jasmine spy'

let wrapper = shallow(ComponentToTest, {
  mocks: { $root }
})

＆＃13;

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

Answer 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也许有帮助。

Answer 3

有两种方法可以使用vue-test-utils完成此操作。

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

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

但是，在您的情况下，您可能想使用计算出的mouting选项，它比mocks中的深层对象要干净一些。

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

希望这会有所帮助！

如果您有兴趣，我正在汇编有关如何测试Vue组件here的简单指南。它正在开发中，但是如果您需要其他有关测试Vue组件的相关帮助，请随时提出问题。

Answer 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
})

使用vue-test-utils和JEST模拟$ root

4 个答案: