title: How to fix Jest error : TypeError: $ is not a function
body: <p>I am writing unit test cases for a Vue.js component.</p>
  <p>When I am trying to <code>shallowMount</code> component using <code>vue-test-util</code> I get an error:</p>
  <blockquote>
  <p>TypeError: $ is not a function at VueComponent.mounted
  (src/components/gridComponent/index.vue:7579:7)</p>
  </blockquote>
  <p>My code:</p>
  <pre><code>import $ from 'jquery';
  
  global['$'] = global['jQuery'] = $;
  
  import { shallowMount, createLocalVue } from '@vue/test-utils'
  import gridComponent from '@/components/gridComponent/index'
  
  describe('grid view component', () =&gt; {
      it('has the expected HTML structure', async () =&gt; {
          let wrapper = await shallowMount(gridComponent, {
              stubs: ['GridLayout', 'GridItem'],
              propsData: {componentsList}
          })
          expect(wrapper.element).toMatchSnapshot()
      })
  })
  </code></pre>
  <p>Below is the code of gridComponent:</p>
  <pre><code>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) =&gt; {
                  $('#${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 &amp;&amp; component.demoData) {
                  this.values = component.demoData
              }
              if (this.values) {
                  this.createMarkup(element, this.values)
                  this.values = ''
              }
              return element
          }
      }
  }
  </code></pre>