Menu
I am writing unit test cases for a Vue.js component.
When I am trying to shallowMount component using vue-test-util I get an error:
TypeError: $ is not a function at VueComponent.mounted (src/components/gridComponent/index.vue:7579:7)
My code:
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()
})
})
Below is the code of 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
}
}
}
245
asked Dec 06 '25 04:12
In the component, try
const $ = require('jquery')
Put this before the usage in the method causing the error.
This will let you know if you are un-defining or redefining it somewhere.
You may need jsdom.
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html>`);
const $ = require('jquery')(window);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
