Как исправить ошибку jest: TypeError: $ не является функцией - PullRequest
Новая
       14

Как исправить ошибку jest: TypeError: $ не является функцией

0 голосов
/ 07 мая 2019

Я пишу тестовые примеры для компонента vuejs.

Когда я пытаюсь shallowMount компонент, используя vue-test-util, я получаю ошибку:

TypeError: $ не является функцией на VueComponent.mounting (SRC / компоненты / gridComponent / index.vue: 7579: 7)

Мой код: 

import $ from 'jquery';
global['$'] = global['jQuery'] = $;
import { shallowMount, createLocalVue } from '@vue/test-utils'
import gridComponent from '@/components/gridComponent/index'
describe('grid view component', () => { 
  it('has the expected html structure', async () => {   
    let wrapper = await shallowMount(gridComponent, {
      stubs: ['GridLayout', 'GridItem'],
      propsData : {componentsList}
    })
    expect(wrapper.element).toMatchSnapshot()
  })
})

ниже код gridComponent: 

import * as $ from 'jquery'
export default {
    name: 'gridComponent',
    components: { GridLayout, GridItem, DxpCommonModal },
    props: ['componentsList'],
    watch: {
        componentsList: function (newVal, oldVal) {
          // eslint-disable-next-line
          this.matchingComponents = this.componentsList
        }
    },
    data () {
        return {
          isDraggable: true,
          isResizable: true
        }
    },
    created () {
    },
    computed: {
        ...mapGetters(['getResources'])
    },
    mounted () {         
       $('#headerComponent').html(this.getSelectorHTML(this.siteDetails.header))         
       $('#footerComponent').html(this.getSelectorHTML(this.siteDetails.footer))
        this.addHtmlOfComponentsInAPage()
    },
    destroyed () {
    },
    methods: {
          addHtmlOfComponentsInAPage () {
             this.selectedPage.Components.forEach((element, index) => {
  $('#${index}').html(this.getSelectorHTML(this.selectedPage.Components[index]))
          })
        },
        getSelectorHTML (component) {
          const element = document.createElement(component.componentType)
          element.setAttribute('content-id', new Date().getTime().toString())
          if (!this.values && component.demoData) {
            this.values = component.demoData
          }
          if (this.values) {
            this.createMarkup(element, this.values)
            this.values = ''
          }
          return element
        }
    }
}

1 Ответ

0 голосов
/ 09 мая 2019

Устранение неполадок

В компоненте попробуйте 

const $ = require('jquery')

Поместите это перед использованием в методе, вызывающем ошибку.

Это сообщит вам, если вы не определяете или переопределяете его где-то.

Раствор 2

Вам может понадобиться JSDOM. 

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html>`);
const $ = require('jquery')(window);
...