【问题标题】：How to fix Jest error : TypeError: $ is not a function如何修复 Jest 错误：TypeError: $ is not a function
【发布时间】：2019-09-25 03:20:11
【问题描述】：

我正在为 Vue.js 组件编写单元测试用例。

当我尝试使用vue-test-util shallowMount 组件时出现错误：

TypeError: $ is not a function at VueComponent.mounted (src/components/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
        }
    }
}

【问题讨论】：

能否展示gridComponent的代码？
我已经添加了代码gridComponent

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

【解决方案1】：

疑难解答

在组件中，试试

const $ = require('jquery')

把这个放在导致错误的方法中的用法之前。

这会让您知道您是在某处取消定义还是重新定义它。

解决方案 2

你可能需要 jsdom。

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

【讨论】：

在使用前放入，不在方法外mounted
而 jquery 在你的 node_modules 文件夹中？
你的配置中有 jquery 的别名吗？这可能是解决方案或问题...
我不确定。您是说要在开玩笑配置中添加它吗？
您是否也尝试过在根文件中使用require... 而不是import...？