Блог

Главная - Вопросы по программированию - Не удается прочитать свойство $loading неопределенного значения при использовании Jest с компонентом Nuxt

Не удается прочитать свойство $loading неопределенного значения при использовании Jest с компонентом Nuxt

#unit-testing #vue.js #jestjs #nuxt.js #vue-test-utils

#модульное тестирование #vue.js #jestjs #nuxt.js #vue-test-utils

Вопрос:

Когда я пытаюсь протестировать один из моих компонентов, используя 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()
  })
})

Комментарии:

1. вы могли бы просто издеваться над этим

2. Jest монтирует ваш компонент без дополнительных свойств экземпляра Nuxt. вам нужно смоделировать это. Вы можете сделать это локально, во время монтирования компонента, или вы можете создать глобальный макет, если часто им пользуетесь (но я так не думаю). Издевательство хорошо описано в документах vue-test-utils.

Ответ №1:

Я нашел решение. Решение состоит в том, чтобы смоделировать nuxt следующим образом:

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