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

【问题标题】：Cannot read property $loading of undefined when using Jest with Nuxt component将 Jest 与 Nuxt 组件一起使用时无法读取未定义的属性 $loading
【发布时间】：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 文档中有很好的描述。

标签： unit-testing vue.js jestjs nuxt.js vue-test-utils

【解决方案1】：

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

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

【讨论】：