使用 Open WC Karma-ESM 插件测试 Typescript 文件时出错

Question

我运行测试作为sudo，即sudo npm 运行 test

...它奏效了。去搞清楚！有人愿意冒险猜测为什么会这样吗？

我正在使用开放式网络组件 karma-esm 插件在我的 monorepo 中进行运行测试。但是我收到 headless chrome 抛出的错误，有一个意外的标记“<”。我知道在测试打字稿文件时可能会发生此类语法错误，但我不确定如何克服它。

这是我的根 package.json 测试脚本：

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

这是我的 karma.conf.js 文件（在 repo 的根目录中，因此没有定义基本路径）：

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;
};

除了一些覆盖阈值外，这些配置非常接近推荐的配置。这是命令的输出：

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)

我知道有时如果 tsconfig.json 文件将 module 设置为 ES 格式，则可能会出现语法错误。但是我的 module 设置为 CommonJS ，我认为这会起作用。我没有正确克服这个问题吗？有人知道吗？我的 tsconfig.json 文件如下：

{
    "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"
  ]
}

谢谢！

Answer 1

我运行测试作为sudo，即sudo npm 运行 test

...它奏效了。看起来在 npm 中使用 sudo 是一个非常非常糟糕的主意。我试图重置这些文件的权限以使其变得更好，但它没有用。我错过了什么？

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

使用 Open WC Karma-ESM 插件测试 Typescript 文件时出错

Error testing Typescript files with Open WC Karma-ESM plugin

javascript

web-component

karma-runner

monorepo

angular