vue-test-utils - 如何处理 $refs？

Posted 2023-02-22

【中文标题】vue-test-utils - 如何处理 $refs？

【英文标题】：vue-test-utils - how to handle $refs?

【发布时间】：2020-07-28 03:26:07

【问题描述】：

情况

我正在尝试shallowMount 一个组件，但未成功。

组件利用$refs 读取div 的高度。该值在计算属性中读取。然后在 mounted 生命周期中，我将该值保存在存储中。

逻辑本身很简单，工作正常。但是在测试套件中，组件的安装中断，因为$refs 键是undefined。

明确一点：我不打算测试$refs，我只需要安装组件并继续进行实际的单元测试。

组件

这是标记：

<div ref="tgmp">

我将 div 的高度保存在计算属性中：

computed: 
  barH() 
    return this.$refs.tgmp.clientHeight
  

然后，在挂载的生命周期中，我提交存储中的值：

this.$store.commit('setBarHeight', this.barH)

测试

这是测试。我省略了不相关的东西，比如在 localVue 中安装商店。

beforeEach(() => 
  wrapper = shallowMount(Bar, 
    store,
  )
)

test('is a Vue instance', () => 
  expect(wrapper.isVueInstance()).toBeTruthy()
)

错误

Error in mounted hook: "TypeError: Cannot read property 'clientHeight' of undefined"

尝试

我一直在尝试在任何地方寻找解决方案，但找不到。 我试图模拟 $refs，但没有成功：

wrapper = shallowMount(ThePlayerBar, 
  store,
  mocks: 
    $refs: 
      tgmp: 
        clientHeight: 600
      
    
  
)

问题

如何在mounted 生命周期中挂载使我们成为$refs 的组件？

【问题讨论】：

我不确定 shallowMount 中的 ref 发生了什么，但您可以尝试使用特定存根的 mount 或模拟一个计算值。

@EstusFlask 感谢您的回复！看来它正在工作。我会做更多的东西来确保它。如果您愿意，您可以回复，因为这似乎是正确的解决方案。

我检查了它，我希望在你的情况下会有一个参考。 <div ref="tgmp"> 在渲染时可能不存在，可能是它是其他组件的子组件或受指令影响。

【参考方案1】：

shallowMount 应该提供 refs，所以 this.$refs.tgmp 应该是 <div> 元素，以防 <div ref="tgmp"> 存在于初始渲染的视图中。

$refs 不应该被模拟，因为它是内部属性并在组件初始化时分配。它是依赖于 ref 的计算属性，因此可以在必要时对其进行模拟，因为在 JSDOM 中元素高度应为 0：

jest.spyOn(ThePlayerBar.options.computed, 'barH').mockReturnValue(600);

或者：

  wrapper = shallowMount(Bar, 
    store,
    computed:  barH: () => 600 
  )

【讨论】：

感谢您的回答。那个间谍好像不行。我收到如下错误：无法读取未定义的“已计算”属性。属性 barH 没有访问类型 get。但是我设法按照您在评论中的建议通过存根计算属性使其工作：computed: barH() return 60 您在这种情况下测试过那个 spyOn 吗？如果您可以编辑答案，或者我可以将该计算存根添加为我的问题的编辑。

我用两种方式更新了答案。我不确定在哪种情况下间谍可能会失败，因为组件暴露了options，并且它以前对我有用，但我将它修复为jest.spyOn，没有get。