将 Jest 与 Nuxt 组件一起使用时无法读取未定义的属性 $loading

Posted 2023-02-22

【中文标题】将 Jest 与 Nuxt 组件一起使用时无法读取未定义的属性 $loading

【英文标题】：Cannot read property $loading of undefined when using Jest with Nuxt component

【发布时间】：2019-07-27 06:11:41

【问题描述】：

当我尝试使用 nuxt 和 jest 测试我的一个组件时，我收到以下错误：

Cannot read property '$loading' of undefined

这是由我的组件中的以下代码行引起的

this.$nuxt.$loading.start()

在我的组件上运行测试时如何防止出现此错误？

测试文件如下所示：

import  mount  from '@vue/test-utils'
import Converter from '@/components/Converter.vue'

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

【问题讨论】：

你可以模拟一下

Jest 在没有 Nuxt 附加实例属性的情况下安装您的组件。你需要嘲笑这个。您可以在安装组件时在本地执行此操作，或者如果您大量使用它，您可以创建全局模拟（但我不这么认为）。模拟在 vue-test-utils 文档中有很好的描述。

【参考方案1】：

我找到了解决方案。解决方案是像这样模拟 nuxt：

const wrapper = mount(Converter, 
  mocks: 
    $nuxt: 
      $loading: 
        start: () => 
      
    
  
)