Transpile dependency when running tests with Jest

Question

I added a dependency on tiptap-vuetify to my Vue app which in turn added transitive dependencies on 19 other modules. After adding it, I ran my tests and got the following 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

SyntaxError: Unexpected token 'export'

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at node_modules/tiptap-vuetify/dist/bundle-umd.js:1:112
  at Object.<anonymous> (node_modules/tiptap-vuetify/dist/bundle-umd.js:1:2)

So it seems that tiptap-vuetify contains code that Jest needs to transpile. According to the Jest docs adding the following to jest.config.js should fix the problem if the untranspiled code is in either tiptap or tiptap-vuetify

transformIgnorePatterns: [
  "node_modules/(?!(tiptap-vuetify|tiptap)/)"
]

But it didn't make any difference. I added the following instead:

transformIgnorePatterns: ['/node_modules/tiptap.*']

and the problem no longer occurs, but I think I may be transpiling my entire dependency tree, because the tests take much longer to run now. Is there a better way to fix this issue?

Answer 1

tiptap-vuetify isn't the actual module that is causing the error, despite the misleading stacktrace.

The error most likely comes from vuetify, as shown in the Details output of the Jest error:

    Jest encountered an unexpected token

    //...

    Details:
                                                         
    /Users/tony/src/tmp/vue2-vuetify-test/node_modules/vuetify/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      11 | <script>
      12 | // import the component and the necessary extensions
    > 13 | import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'
         | ^
      14 |
      15 | export default {
      16 |   // specify TiptapVuetify component in "components"

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350: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)
      at Object.<anonymous> (src/components/MyTipTap.vue:13:1)

Make sure your transformIgnorePatterns excludes vuetify to ensure it gets transpiled:

// jest.config.js
module.exports = {
  transformIgnorePatterns: ['/node_modules/(?!vuetify)'],
}