时间戳

首页 > 解决方案 > vue-test-utils - 如何处理 $refs？

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

问题描述

情况

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

该组件$refs用于读取 a 的高度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"

TypeError：无法读取未定义的属性“clientHeight”

试图

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

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

问题

我怎样才能安装一个让我们$refs在mounted生命周期中发挥作用的组件？

标签： javascriptunit-testingvue.jsjestjsvue-test-utils

解决方案

shallowMount应该提供参考，所以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 }
  })

推荐阅读