Error testing Typescript files with Open WC Karma-ESM plugin

Question

I ran the test as sudo, i.e. sudo npm run test

....and it worked. Go figure! Anyone care to venture a guess as to why that would be the case?

I'm using the open web components karma-esm plugin to run tests in my monorepo. But I'm getting an error thrown by headless chrome that there's an unexpected token of '<'. I understand that syntax errors like these can happen when testing typescript files but I'm not sure how to overcome it.

Here's my root package.json test script:

"test": "npx karma start --coverage"

Here's my karma.conf.js file (on the root of the repo so no basepath defined):

const defaultConfig = require('@open-wc/testing-karma/esm-config');
const merge = require('deepmerge');

module.exports = (config) => {
   config.set(
      merge(defaultConfig(config), {

        // define where your test files are, make sure to set type to module
        files: [
            { pattern: 'packages/*.tests.ts', type: 'module' },
        ],

        plugins: [
            // load plugin
            require.resolve('@open-wc/karma-esm'),

            // fallback: resolve any karma- plugins
            'karma-*',
        ],

        frameworks: ['esm'],

        esm: {
            babel: false,
            nodeResolve: true,
            fileExtensions: ['.ts', '.scss'],
            customBabelConfig: {
                plugins: [
                    ['@babel/plugin-proposal-decorators', { legacy: true }],
                    ['@babel/plugin-proposal-class-properties', { loose: true }],
                    ['css-modules-transform', { extensions: ['.css', '.scss', '.less'] }],
                ],
                presets: [
                    '@babel/preset-typescript',
                ],
            },
        },

        coverageIstanbulReporter: {
            thresholds: {
                global: {
                    statements: 90,
                    lines: 90,
                    branches: 90,
                    functions: 90,
                },
            },
        },
        captureTimeout: 60000,
        browserDisconnectTolerance: 3, 
        browserDisconnectTimeout : 60000,
        browserNoActivityTimeout : 60000,

    }),
);

return config;
};

These are pretty close to the recommended config except for some coverage thresholds. And here's the output of the command:

START:
28 10 2019 16:40:50.262:WARN [filelist]: Pattern 
"/Users/ppepperSandbox/Documents/workspace/test-monorepo/__snapshots__/**/*.md" does not 
match any file.
28 10 2019 16:40:50.283:INFO [karma-server]: Karma v4.1.0 server started at 
http://0.0.0.0:9876/
28 10 2019 16:40:50.283:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with 
concurrency unlimited
28 10 2019 16:40:50.286:INFO [launcher]: Starting browser ChromeHeadless
28 10 2019 16:40:50.723:INFO [HeadlessChrome 78.0.3904 (Mac OS X 10.14.6)]: Connected on 
socket fmkN7XNEGqz3pMNNAAAA with id 92870419
HeadlessChrome 78.0.3904 (Mac OS X 10.14.6) ERROR
Uncaught SyntaxError: Unexpected token '<'
at node_modules/source-map-support/browser-source-map-support.js:1:1

SyntaxError: Unexpected token '<'HeadlessChrome 78.0.3904 (Mac OS X 10.14.6) ERROR
Uncaught SyntaxError: Unexpected token '<'
at node_modules/source-map-support/browser-source-map-support.js:1:1

SyntaxError: Unexpected token '<'
Finished in 0.245 secs / 0 secs @ 16:40:50 GMT-0400 (Eastern Daylight Time)

I know that sometimes if the tsconfig.json file has module set as ES formats then a syntax error can occur. But mine has module set as CommonJS which, I thought, would work. Am I not overcoming this issue correctly? Does anyone know? My tsconfig.json file is below:

{
    "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "removeComments": true,
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "baseUrl": "."
  },
    "include": [
    "packages/**/src/**/*.ts",
    "declarations.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Thank you!

Answer 1

I ran the test as sudo, i.e. sudo npm run test

....and it worked. Looks like using sudo with npm is a very, very bad idea. I tried to reset the permissions on these files to make it all better but it didn't work. What am I missing?

sudo chown -R $(whoami) /usr/local/lib/node_modules
sudo chown -R $(whoami) /usr/local/bin
sudo chown -R $(whoami) /usr/local/share