Writing a unit test causes a "Jest encountered an unexpected token" error

[everttrollip]

Issue description

I have a Vue project, installed with vue-cli, and also added Vuetify. I installed tiptap-vuetify as explained in the readme, and I use jest for writing some unit tests.

After installing tiptap-vuetify, and adding a test for one of my components using it, I ran into one of those popular (but not so nice) error messages from Jest,

Jest encountered an unexpected token

Expected result

The tests to run

Details of the error

Details:

    /Users/evert/code/bitbucket/hub/frontend/node_modules/vuetify/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1085:14)
      at node_modules/tiptap-vuetify/dist/bundle-umd.js:1:201
      at Object.<anonymous> (node_modules/tiptap-vuetify/dist/bundle-umd.js:1:429)

After some debugging and research, I have narrowed it down to the following import that is causing the issue:

import { TiptapVuetifyPlugin } from 'tiptap-vuetify';

Not sure how to look further. Here is the jest config file,

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**'],
  coverageReporters: ['html', 'text-summary'],
  moduleFileExtensions: [
    'js',
    'json',
    // tell Jest to handle `*.vue` files
    'vue',
  ],
  transform: {
    // and process `*.vue` files with `vue-jest`
    '^.+\\.vue$': 'vue-jest',
    // process js with `babel-jest`
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/',
  ],
  moduleNameMapper: {
    // support the same @ -> src alias mapping in source code
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  moduleDirectories: [
    'node_modules',
    'src',
  ],
  setupFilesAfterEnv: [
    '<rootDir>/tests/jest-setup.js',
  ],
  snapshotSerializers: [
    'jest-serializer-vue',
  ],
  reporters: ['default', 'jest-junit'],
};

Links found during research:

• How to set transformIgnorePatterns to fix "Jest encountered an unexpected token" nrwl/nx#812
• Unexpected token export, when adding vuetify config file. nuxt-community/vuetify-module#172

[iliyaZelenko]

Hi, sorry for the long reply, was a little busy.

The first thing that strikes the head is that for some reason the ES modules are not supported.

The first thing I could google is: https://stackoverflow.com/a/52224329/5286034

Although apparently a more relevant answer has recently appeared: https://stackoverflow.com/a/61652773/5286034

Hope this helps.