karma gets stuck during transforming the file using es6-transform-karma-typescript

Question

---

---

I am trying to set up a unit test framework with typescript, karma, and mocha using karma-typescript for transpiling and es6-transform-karma-typescript for converting the es6 code to browser compatible es5 code. In my case, workflow stuck at the following line.

16 08 2021 19:34:35.898:INFO [compiler.karma-typescript]: Compiled 64 files in 6103 ms.
16 08 2021 19:34:36.422:DEBUG [bundler.karma-typescript]: Project has 247 import/require statements, code will be bundled
**16 08 2021 19:34:36.500:DEBUG [es6-transform.karma-typescript]: Transforming /Users/test/sourcecode/test-web-ui/src/app/Memory.js**

Here are my tsconfig.json settings and karma.conf settings.

karma.conf:

const {dirname, join, resolve} = require("path");

module.exports = (config) => {
    config.set({
        plugins: ['karma-chrome-launcher', 'karma-mocha', 'karma-typescript', 'karma-webpack', 'webpack','karma-mocha-reporter'],
        frameworks: ['mocha', 'karma-typescript'],
        preprocessors: {
            "**/*.ts": ["karma-typescript"],
            "**/*.tsx": ["karma-typescript"] // *.tsx for React Jsx
        },
        logLevel: config.LOG_DEBUG,
        browsers: ['Chrome'],
        singleRun: true,
        autoWatch: false,
        color:true,
        reporters: ["mocha", "karma-typescript"],
        files: [{ pattern: "src/**/*.ts" }, {pattern: "src/**/*.tsx" }],
        karmaTypescriptConfig: {
            stopOnFailure: true,
            bundlerOptions: {
                acornOptions: {
                    ecmaVersion: 8,
                  },
                transforms: [
                    require("karma-typescript-es6-transform")({
                        presets: [require("@babel/preset-env")]
                    })
                ]
            },
            compilerOptions: {
                target: "ES2015",
                lib: ["ESNext", "dom"],
                module: "CommonJS",
                incremental: false
            },
            tsconfig: "testing.tsconfig.json"
        }
    });
}

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES2017",
        "module": "CommonJS",
        "incremental": true,
        "noUnusedParameters": false,
        "sourceMap": true,
        "jsx": "react",
        "strict": true,
        "esModuleInterop": true,
        "declaration": true,
        "declarationMap": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
    
        "noFallthroughCasesInSwitch": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true
      },
    "include": ["src/**/*.ts","src/**/*.tsx"],
    "exclude": ["node_modules"]
}

I am running the test using below command in package.json.

"test": "karma start karma.conf.js --log-level=DEBUG",

Anyone could you please help to find out the issue.

Answer 1

I had this problem for a while and dang it was frustrating. I was able to find the answer here. Apparently "acorn" needs to be running version 8 or with "karma-typescript-es6-transform"

The tricky part is that that link posted above says they have patched this problem. And indeed they have! If you check your package-lock.json and search "acorn" you'll probably find a few dependencies which require "acorn" and if you scroll down to "karma-typescript-es6-transform" you'll see that it requires "acorn" and is running a version of ^8.x.x. This is where I found myself and the compilation was still hanging

The problem was that my main "acorn" dependency was still on version ^7.x.x and even though "karma-typescript-es6-transform" required a hire version, node wouldn't respect that requirement and used the main "acorn" dependency version.

My workaround for now is that I installed acorn as a dev-dependency so that I was sure that I would get the latest version: npm i --save-dev acorn Try that out