ts-jest fails to run a tsx test file because of "Import" from a module's js file

Question

I'm trying to use ts-jest to run a tsx test file form.spec.tsx.

The form.spec.tsx imports React Quill editor and some of the plugins.

How can I bypass SyntaxError: Unexpected identifier error coming from a plugin called quill-mention that import Quill? This module is involved in form.spec.tsx.

I have added ["<rootDir>/node_modules/"] to the transformIgnorePatterns field in jest configuration, but this problem still exists from /node_modules/quill-mention/src/quill.mention.js

  ● Test suite failed to run

    /home/web/node_modules/quill-mention/src/quill.mention.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Quill from 'quill';
                                                                                                    ^^^^^

    SyntaxError: Unexpected identifier

      1 | import React from "react"
    > 2 | import "quill-mention";
        | ^

form.spec.tsx:

import {render, RenderResult, waitForElement} from "react-testing-library";
import ReactQuill, {Quill} from 'react-quill';
import "quill-mention";

const renderResult = render(
        <ReactQuill
            modules={
             {
                mention: {
                   allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
                   mentionDenotationChars: ["@", "#"],
                },
            }
        />
);

package.json

  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.jest.json"
      },
      "window": {}
    },
    "testRegex": "(/watch/web/__tests__/.*|(\\.|/)(test|spec))\\.(jsxxxx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "modulePaths": [
      "<rootDir>"
    ],
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
      ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/FileMock.js"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/"
    ]
  }

tsconfig.jest.json:

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "noLib": false,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "lib": ["es6", "dom"],
    "types": ["jest","reflect-metadata"],
    "inlineSources":true,
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules"
  ]
}

Someone says allowJs: true could fix it but it doesn't work. All of my tests failed saying JavaScript heap out of memory.

Answer 1

The problem is that Jest is not transforming that file. And in plain JS, import is not valid. You need to configure Jest so it will transform that file.

First, change the transform to also process files with extensions js or jsx (in addition to ts files:)

"jest": {
  "transform": {
    "^.+\\.(ts|js)x?$": "ts-jest"
  },

Next you need to whitelist the directory, so Jest does transform it. This skips transforming all files in node_modules except the quill-mention dir.

    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!(quill-mention)/)"
    ]

This should get past the problems with quill-mention. And it should now fail with ReferenceError: MutationObserver is not defined, which is a different issue, having to do with Jest's JSDom environment it uses. You can read about how to fix that here:

Testing MutationObserver with Jest

You may also want to consider moving to babel-jest + @babel/preset-typescript instead of using ts-jest.