Не удается проверить компонент Vue, поскольку экземпляр Vue не определен - PullRequest
Новая
       45

Не удается проверить компонент Vue, поскольку экземпляр Vue не определен

0 голосов
/ 20 октября 2019

У меня есть приложение Vue, которое использует Vue Analytics, которое создает метод this.$ga.page для отслеживания страниц. Теперь мне нужно протестировать свой компонент, используя Jest, но он говорит, что this.$ga.page не определено. Я инициализирую Vue Analytics в main.js.

Как включить main.js перед компонентом в тестовом файле? Я знаю, что нам нужно добавить это в методе beforeEach, но я точно не знаю, как это сделать.

Vue Analytics init в main.js

import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
  id: 'UA-150437966-1'
})

Тест "Моя домашняя страница" 

import { mount } from '@vue/test-utils'
import Homepage from '../../src/Pages/Homepage'


describe('Homepage', () => {
    const wrapper = mount(Homepage)

    it('has a button', () => {
        expect(wrapper.contains('button')).toBe(true)
    })
})

Homepage.vue выдержка 

created: function() {
    //analytics

    this.$ga.page({
      page: "/",
      title: "Home page",
      location: window.location.href
    });
  }
};

Ошибка, которую я получаю 

Homepage › encountered a declaration exception

    TypeError: Cannot read property 'page' of undefined

      67 |     //analytics
      68 | 
    > 69 |     this.$ga.page({

1 Ответ

0 голосов
/ 21 октября 2019

Vue Test Utils рекомендует настроить ваши плагины в localVue, чтобы избежать загрязнения глобального Vue. Вот как это выглядело бы: 

import { localVue, mount } from '@vue/test-utils'
import Homepage from '@/components/Homepage'

localVue.use(VueAnalytics, { id: 'UA-150437966-1' })

describe('Homepage', () => {
  let wrapper = null

  beforeEach(() => {
    wrapper = mount(Homepage, {
      localVue,
    })
  })

  // ...
})

С другой стороны, если в ваших тестах не имеет значения, что глобальное Vue изменено, вы можете настроить свою среду Jest 23.x с помощью setupTestFrameworkScriptFile: 

// jest.config.js
module.exports = {
  setupTestFrameworkScriptFile: '<rootDir>/tests/jest-setup.js',
}

И в вашем установочном файле вы можете инициализировать Vue Analytics: 

// <rootDir>/tests/jest-setup.js
import Vue from 'vue'
import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
  id: 'UA-150437966-1'
})
...