Vue.js Vue jest$refs函数和组件模拟问题

我正在为我的一个vue组件使用一个名为headloom的节点模块。我试图模拟库并编写测试，但我得到了一个

this.$refs.headloom.\u setHeightOffset不是一个函数

，似乎$ref中的函数没有定义

Vue组件

<script>
  import { headroom } from 'vue-headroom';

  name: 'Test',

  components: {
    headroom    
  },

  mounted() {
    this.$refs.headroom._setHeightOffset();
  }
</script>

<template>
 <headroom ref="headroom">
   <OtherComponent />
  <headroom>
</template>

我也试着这样嘲笑它，但还是不起作用。

---

wrapper.vm.$refs.headloom.\u setHeightOffset=jest.fn（）

如果要尝试模拟内部方法

\u setHeightOffset

，则需要使用mount

或者您可以使用浅安装，然后在净空上创建存根

为什么？因为

净空

有自定义测试Vue组件的子组件。如果使用shallowMount，哪个净空已被自动删除。参考文献：

我创建了几个关于如何监视或模拟它的示例。你可以选择适合你的

//文件：ComponentTest.spec.js
从“vue净空”导入{净空}；
从'@vue/test-utils'导入{mount，shallowMount}；
从“@/components/ComponentTest.vue”导入组件；
描述（'ComponentTest.vue'，（）=>{
它（'example spy&mount'，（）=>{
const spy=jest.spyOn（headloom.methods，“_setHeightOffset”）；
常数包装=安装（组件）；
expect（wrapper.vm）.toBeTruthy（）；
预期（间谍）。被催促的时间（2）；
});
它（'示例模拟和装载'，（）=>{
const mock=jest.fn（）；
净空.方法_setHeightOffset=mock；
常数包装=安装（组件）；
expect（wrapper.vm）.toBeTruthy（）；
期望（模拟）。被催促的时间（2）；
});
it（'模拟和浅装示例'，（）=>{
const mock=jest.fn（）；
净空.方法_setHeightOffset=mock；
常量包装=浅装（组件{
存根：{
净空，
},
});
expect（wrapper.vm）.toBeTruthy（）；
期望（模拟）。被催促的时间（2）；
});
});

测试组件示例（简化）

//文件ComponentTest.vue
从“vue净空”导入{净空}；
导出默认值{
名称：'测试'，
组件：{净空}，
安装的（）{
此。$refs.净空。_setHeightOffset（）；
},
};
xxx

然后我运行jest来运行ComponentTest.spec.js

$ npx jest ComponentTest.spec.js 
 PASS  test/ComponentTest.spec.js
  ComponentTest.vue
    ✓ example spy & mount (12 ms)
    ✓ example mock & mount (2 ms)
    ✓ example mock & shallow mount (2 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.176 s

注意：

---

我使用

来收集时间（2）

。为什么？因为内部方法已在内部调用，您尝试再次调用它。

这是在存根中实际拉入组件吗？可以模拟那个位并测试组件本身吗？这确实让我达到了目的，我只是模拟了净空，比如const headloom={template:''，方法：{u setHeightOffset（）{}，}，}；感谢您的帮助所有3个“it”都有测试目标组件（名称：test）的目的。获取stub/mock的是目标组件的子组件（在本文中是：headloom）。

$ npx jest ComponentTest.spec.js 
 PASS  test/ComponentTest.spec.js
  ComponentTest.vue
    ✓ example spy & mount (12 ms)
    ✓ example mock & mount (2 ms)
    ✓ example mock & shallow mount (2 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.176 s