Vue Data table and jest error? unexpected Token

JavaScript
1

I’m getting this error:

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

SyntaxError: Unexpected token (1:251)

  at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2757:13)
  at Parser.pp.unexpected (node_modules/vue-template-es2015-compiler/buble.js:647:8)
  at Parser.pp.expect (node_modules/vue-template-es2015-compiler/buble.js:641:26)
  at Parser.pp$2.parseBindingList (node_modules/vue-template-es2015-compiler/buble.js:1694:19)
  at Parser.pp$1.parseFunctionParams (node_modules/vue-template-es2015-compiler/buble.js:1231:22)
  at Parser.pp$1.parseFunction (node_modules/vue-template-es2015-compiler/buble.js:1218:8)
  at Parser.pp$3.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:2184:17)
  at Parser.<anonymous> (node_modules/vue-template-es2015-compiler/buble.js:6003:24)
  at Parser.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:6129:31)
  at Parser.pp$3.parseExprSubscripts (node_modules/vue-template-es2015-compiler/buble.js:2047:19)

It has to do with Vuetify and jest , here is the simple test:

timport Catalog from '@/views/catalog/Catalog.vue';
import { createLocalVue, mount } from '@vue/test-utils';
import Vuex from 'vuex';
import Vuetify, { VDataTable } from 'vuetify';

describe.skip('Catalog.vue', () => {
  let wrapper;
  const localVue = createLocalVue();
  localVue.use(Vuex);
  let actions;
  let store;
  const title = 'My Catalog';
  let headers = [
    {
      text: 'name',
      align: 'start',
      sortable: false,
      value: 'Name',
    },
    {
      text: 'type',
      value: 'Type',
    },
    {
      text: 'flavorProfile',
      value: 'Flavor Profile',
    },
    {
      text: 'commonForms',
      value: 'Type',
    },
    {
      text: 'availability',
      value: 'Availability',
    },
    {
      text: 'commonForms',
      value: 'Type',
    },
    {
      text: 'origins',
      value: 'Origins',
    },
    {
      text: 'genus',
      value: 'Genus',
    },
    {
      text: 'family',
      value: 'Family',
    },
  ];
  beforeEach(() => {
    actions = {};
    store = new Vuex.Store({
      actions,
    });

    wrapper = mount(Catalog, {
      localVue,
      vuetify: new Vuetify({
        VDataTable,
      }),
      store,
      propsData: {
        search: '',
        headers,
      },
    });
  });
  it(`renders correctly to screen`, () => {
    expect(wrapper.exists()).toBeTruthy();
  });
  it(`has data property for search`, () => {
    expect(wrapper.vm.$data.search).toBeDefined();
  });
  it(`has a data property that matches headers`, () => {
    expect(wrapper.vm.$data.headers).toBeDefined();
    expect(wrapper.vm.$data.headers).toEqual(headers);
  });
  it(`renders a h2 title matching '${title}'`, () => {
    expect(wrapper.find('h2').text()).toEqual(title);
  });
  it.todo(
    `renders table header with the initial matching '${headers[0].text}'`
  );
  it.todo(`fetches herbsandspices from the store`);
  it.todo(`renders fetched data to table`);
});

and the component:

<template lang="pug">
.catalog-container
  h2 My Catalog
  v-data-table(
    :headers="headers",
    class="elevation-1"
    :search="search"
  )
    template(v-slot:top)
      v-text-field(v-model="search" label="search Names" class="mx-4")
    template(v-slot:body.append)
      tr
        td
        td(colspan="4")
</template>

<script>
export default {
  name: 'Catalog',
  data() {
    return {
      search: '',
      headers: [
        {
          text: 'name',
          align: 'start',
          sortable: false,
          value: 'Name',
        },
        {
          text: 'type',
          value: 'Type',
        },
        {
          text: 'flavorProfile',
          value: 'Flavor Profile',
        },
        {
          text: 'commonForms',
          value: 'Type',
        },
        {
          text: 'availability',
          value: 'Availability',
        },
        {
          text: 'commonForms',
          value: 'Type',
        },
        {
          text: 'origins',
          value: 'Origins',
        },
        {
          text: 'genus',
          value: 'Genus',
        },
        {
          text: 'family',
          value: 'Family',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.catalog-container {
  margin-top: 20px;
  padding: 1rem;
}
</style>

Currently in the front end it is running with no errors, Google, Firefox, and Brave shows no errors.

I’m using Vue 2.6.11, generated using the CLI. Pug and sass.

Some of the research states I have to add transformIgnorePattern but Others say to add it in the local vue instance.

Anyone know what’s throwing the error.

2

Quick google search found this: https://github.com/vuejs/vue-jest/issues/175#issuecomment-575043315