Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[karma-esm] Monorepo typescript decorators not working

See original GitHub issue

Hello guys! I am having a problem using karma-esm. when running es-dev-server everything works properly but when running tests with karma-esm I get an error.

Am I making a mistake?

I have this folders structure:

.
├── .config
│   └── babel
│       ├── .components
│       └── .root
├── components
│   └── base
│       ├── .babelrc -> ../../.config/babel/.components
│       ├── MnvBase.spec.ts
│       ├── MnvBase.stories.ts
│       ├── MnvBase.ts
│       ├── index.html
│       ├── package.json
│       └── src
│           ├── index.ts
│           └── styles.ts
├── .babelrc -> .config/babel/.root
├── karma.conf.js
├── karma.conf.ts
├── lerna.json
└── package.json

“.babelrc” file in root:

{
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ],
    "presets": [
      "@babel/preset-typescript"
    ]
}

“.babelrc” file in component:

{ "extends": "../../.babelrc" }

karma.conf.js:

require('ts-node').register({
   compilerOptions: {
      module: 'commonjs',
   },
})
require('./karma.conf.ts')

karma.conf.ts:

import { createDefaultConfig } from '@open-wc/testing-karma'
import merge from 'deepmerge'

export default config => {
   config.set(
      merge(createDefaultConfig(config), {
         files: [
            { pattern: 'components/**/*.spec.ts', type: 'module' },
            { pattern: 'components/**/*.test.ts', type: 'module' },
         ],
         exclude: ['**/@ufrj/**', './.config/**'],
         esm: {
            babel: true,
            nodeResolve: true,
            fileExtensions: ['.ts'],
         },
      })
   )
   return config
}

package.json in root:

...
"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-typescript": "^7.3.3",
    "@open-wc/testing": "^2.3.2",
    "@open-wc/testing-karma": "^3.1.26",
    ...
},
...

Output:

$ npx karma start ./karma.conf.ts --log-level debug
25 08 2019 20:09:06.120:DEBUG [config]: Loading config /Users/vcarvalho/dev/mnv/karma.conf.ts
25 08 2019 20:09:06.126:DEBUG [karma-server]: Final config Config {
  LOG_DISABLE: 'OFF',
  LOG_ERROR: 'ERROR',
  LOG_WARN: 'WARN',
  LOG_INFO: 'INFO',
  LOG_DEBUG: 'DEBUG',
  frameworks: [
    'esm',
    'mocha',
    'snapshot',
    'mocha-snapshot',
    'source-map-support'
  ],
  protocol: 'http:',
  port: 9876,
  listenAddress: '0.0.0.0',
  hostname: 'localhost',
  httpsServerConfig: {},
  basePath: '/Users/vcarvalho/dev/mnv',
  files: [
    Pattern {
      pattern: '/Users/vcarvalho/dev/mnv/__snapshots__/**/*.md',
      served: true,
      included: true,
      watched: true,
      nocache: false,
      weight: [ 1, 1, 1, 0, 0, 0 ],
      type: undefined
    },
    Pattern {
      pattern: '/Users/vcarvalho/dev/mnv/node_modules/axe-core/axe.min.js',
      served: true,
      included: true,
      watched: true,
      nocache: false,
      weight: [ 1, 0, 0, 0, 0, 0 ],
      type: undefined
    },
    Pattern {
      pattern: '/Users/vcarvalho/dev/mnv/components/**/*.spec.ts',
      served: true,
      included: true,
      watched: true,
      nocache: false,
      weight: [ 1, 1, 1, 0, 0, 0 ],
      type: 'module'
    },
    Pattern {
      pattern: '/Users/vcarvalho/dev/mnv/components/**/*.test.ts',
      served: true,
      included: true,
      watched: true,
      nocache: false,
      weight: [ 1, 1, 1, 0, 0, 0 ],
      type: 'module'
    }
  ],
  browserConsoleLogOptions: { level: 'debug', format: '%b %T: %m', terminal: true },
  customContextFile: null,
  customDebugFile: null,
  customClientContextFile: null,
  exclude: [
    '/Users/vcarvalho/dev/mnv/**/@ufrj/**',
    '/Users/vcarvalho/dev/mnv/.config/**',
    '/Users/vcarvalho/dev/mnv/karma.conf.ts'
  ],
  logLevel: 'DEBUG',
  colors: true,
  autoWatch: false,
  autoWatchBatchDelay: 250,
  restartOnFileChange: true,
  usePolling: false,
  reporters: [ 'mocha' ],
  singleRun: true,
  browsers: [ 'ChromeHeadlessNoSandbox' ],
  captureTimeout: 60000,
  proxies: {},
  proxyValidateSSL: true,
  preprocessors: [Object: null prototype] {
    '/Users/vcarvalho/dev/mnv/**/__snapshots__/**/*.md': [ 'snapshot', 'snapshot-filename' ]
  },
  urlRoot: '/',
  upstreamProxy: undefined,
  reportSlowerThan: 0,
  loggers: [
    {
      type: 'console',
      layout: { type: 'pattern', pattern: '%[%d{DATE}:%p [%c]: %]%m' }
    }
  ],
  transports: [ 'polling', 'websocket' ],
  forceJSONP: false,
  plugins: [
    '/Users/vcarvalho/dev/mnv/node_modules/@open-wc/karma-esm/karma-esm.js',
    '/Users/vcarvalho/dev/mnv/node_modules/karma-mocha/lib/index.js',
    '/Users/vcarvalho/dev/mnv/node_modules/karma-mocha-reporter/index.js',
    '/Users/vcarvalho/dev/mnv/node_modules/karma-source-map-support/lib/index.js',
    '/Users/vcarvalho/dev/mnv/node_modules/karma-coverage-istanbul-reporter/src/reporter.js',
    '/Users/vcarvalho/dev/mnv/node_modules/karma-snapshot/lib/index.js',
    '/Users/vcarvalho/dev/mnv/node_modules/karma-mocha-snapshot/lib/index.js',
    '/Users/vcarvalho/dev/mnv/node_modules/karma-chrome-launcher/index.js',
    '/Users/vcarvalho/dev/mnv/node_modules/@open-wc/testing-karma/src/snapshot-filename-preprocessor.js',
    'karma-*',
    [Object: null prototype] {
      'launcher:ChromeHeadlessNoSandbox': [ 'factory', [Function] ]
    }
  ],
  client: {
    args: [],
    useIframe: true,
    runInParent: false,
    captureConsole: true,
    clearContext: true,
    mocha: { reporter: 'html' }
  },
  defaultClient: {
    args: [],
    useIframe: true,
    runInParent: false,
    captureConsole: true,
    clearContext: true,
    mocha: { reporter: 'html' }
  },
  browserDisconnectTimeout: 2000,
  browserDisconnectTolerance: 0,
  browserNoActivityTimeout: 30000,
  processKillTimeout: 2000,
  concurrency: Infinity,
  failOnEmptyTestSuite: true,
  retryLimit: 2,
  detached: false,
  crossOriginAttribute: true,
  browserSocketTimeout: 20000,
  cmd: 'start',
  configFile: '/Users/vcarvalho/dev/mnv/karma.conf.ts',
  customLaunchers: {
    ChromeHeadlessNoSandbox: {
      base: 'ChromeHeadless',
      flags: [ '--no-sandbox', '--disable-setuid-sandbox' ]
    }
  },
  esm: {
    coverage: undefined,
    compatibility: 'none',
    babelModernExclude: [
      '**/node_modules/sinon/**/*',
      '**/node_modules/mocha/**/*',
      '**/node_modules/chai/**/*',
      '**/node_modules/sinon/chai/**/*'
    ],
    polyfills: { webcomponents: true, fetch: true },
    exclude: [ '**/__snapshots__/**/*' ],
    babel: true,
    nodeResolve: true,
    fileExtensions: [ '.ts' ]
  },
  mochaReporter: { showDiff: true },
  coverageIstanbulReporter: {
    reports: [ 'html', 'lcovonly', 'text-summary' ],
    dir: 'coverage',
    combineBrowserReports: true,
    skipFilesWithNoCoverage: false,
    thresholds: {
      global: { statements: 80, branches: 80, functions: 80, lines: 80 }
    }
  },
  snapshot: {
    update: undefined,
    prune: undefined,
    limitUnusedSnapshotsInWarning: -1,
    pathResolver: [Function: pathResolver]
  }
}
25 08 2019 20:09:06.131:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/@open-wc/karma-esm/karma-esm.js.
25 08 2019 20:09:06.362:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-mocha/lib/index.js.
25 08 2019 20:09:06.363:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-mocha-reporter/index.js.
25 08 2019 20:09:06.371:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-source-map-support/lib/index.js.
25 08 2019 20:09:06.372:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-coverage-istanbul-reporter/src/reporter.js.
25 08 2019 20:09:06.507:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-snapshot/lib/index.js.
25 08 2019 20:09:06.527:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-mocha-snapshot/lib/index.js.
25 08 2019 20:09:06.528:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-chrome-launcher/index.js.
25 08 2019 20:09:06.531:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/@open-wc/testing-karma/src/snapshot-filename-preprocessor.js.
25 08 2019 20:09:06.531:DEBUG [plugin]: Loading karma-* from /Users/vcarvalho/dev/mnv/node_modules
25 08 2019 20:09:06.533:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-chrome-launcher.
25 08 2019 20:09:06.533:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-coverage-istanbul-reporter.
25 08 2019 20:09:06.533:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-mocha.
25 08 2019 20:09:06.533:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-mocha-reporter.
25 08 2019 20:09:06.534:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-mocha-snapshot.
25 08 2019 20:09:06.534:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-snapshot.
25 08 2019 20:09:06.534:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-source-map-support.
25 08 2019 20:09:06.534:DEBUG [plugin]: Loading plugin /Users/vcarvalho/dev/mnv/node_modules/karma-sourcemap-loader.
25 08 2019 20:09:06.534:DEBUG [plugin]: Loading inlined plugin (defining launcher:ChromeHeadlessNoSandbox).
25 08 2019 20:09:06.550:DEBUG [web-server]: Instantiating middleware
25 08 2019 20:09:06.552:DEBUG [reporter]: Trying to load reporter: mocha
25 08 2019 20:09:06.579:DEBUG [reporter]: Trying to load color-version of reporter: mocha (mocha_color)
25 08 2019 20:09:06.579:DEBUG [reporter]: Couldn't load color-version.

START:
25 08 2019 20:09:06.615:DEBUG [filelist]: Excluded file "/Users/vcarvalho/dev/mnv/components/base/node_modules/@ufrj/mnv-utils/MnvUtils.spec.ts"
25 08 2019 20:09:06.615:DEBUG [filelist]: Excluded file "/Users/vcarvalho/dev/mnv/components/titles/node_modules/@ufrj/mnv-base/MnvBase.spec.ts"
25 08 2019 20:09:06.615:DEBUG [filelist]: Excluded file "/Users/vcarvalho/dev/mnv/components/titles/node_modules/@ufrj/mnv-base/node_modules/@ufrj/mnv-utils/MnvUtils.spec.ts"
25 08 2019 20:09:06.621:WARN [filelist]: Pattern "/Users/vcarvalho/dev/mnv/__snapshots__/**/*.md" does not match any file.
25 08 2019 20:09:06.621:WARN [filelist]: Pattern "/Users/vcarvalho/dev/mnv/components/**/*.test.ts" does not match any file.
25 08 2019 20:09:06.629:INFO [karma-server]: Karma v4.2.0 server started at http://0.0.0.0:9876/
25 08 2019 20:09:06.630:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
25 08 2019 20:09:06.633:INFO [launcher]: Starting browser ChromeHeadless
25 08 2019 20:09:06.633:DEBUG [launcher]: null -> BEING_CAPTURED
25 08 2019 20:09:06.633:DEBUG [temp-dir]: Creating temp dir at /var/folders/st/1v9r0sf5015cthwt58lgmcd00000gn/T/karma-89714435
25 08 2019 20:09:06.634:DEBUG [launcher]: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --user-data-dir=/var/folders/st/1v9r0sf5015cthwt58lgmcd00000gn/T/karma-89714435 --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-background-timer-throttling --disable-renderer-backgrounding --disable-device-discovery-notifications --no-sandbox --disable-setuid-sandbox http://localhost:9876/?id=89714435 --headless --disable-gpu --remote-debugging-port=9222
25 08 2019 20:09:06.777:DEBUG [web-server]: serving: /Users/vcarvalho/dev/mnv/node_modules/karma/static/client.html
25 08 2019 20:09:06.822:DEBUG [web-server]: serving: /Users/vcarvalho/dev/mnv/node_modules/karma/static/karma.js
25 08 2019 20:09:06.921:DEBUG [karma-server]: A browser has connected on socket -0VpZA-Or9dUiGHLAAAA
25 08 2019 20:09:06.924:DEBUG [web-server]: upgrade /socket.io/?EIO=3&transport=websocket&sid=-0VpZA-Or9dUiGHLAAAA
25 08 2019 20:09:06.940:DEBUG [HeadlessChrome 76.0.3809 (Mac OS X 10.13.6)]: undefined -> CONNECTED
25 08 2019 20:09:06.940:INFO [HeadlessChrome 76.0.3809 (Mac OS X 10.13.6)]: Connected on socket -0VpZA-Or9dUiGHLAAAA with id 89714435
25 08 2019 20:09:06.941:DEBUG [launcher]: BEING_CAPTURED -> CAPTURED
25 08 2019 20:09:06.941:DEBUG [launcher]: ChromeHeadless (id 89714435) captured in 0.311 secs
25 08 2019 20:09:06.941:DEBUG [HeadlessChrome 76.0.3809 (Mac OS X 10.13.6)]: CONNECTED -> CONFIGURING
25 08 2019 20:09:06.946:DEBUG [middleware:karma]: custom files /Users/vcarvalho/dev/mnv/node_modules/@open-wc/karma-esm/src/esm-context.html /Users/vcarvalho/dev/mnv/node_modules/@open-wc/karma-esm/src/esm-debug.html null
25 08 2019 20:09:06.946:DEBUG [middleware:karma]: Serving customContextFile /Users/vcarvalho/dev/mnv/node_modules/@open-wc/karma-esm/src/esm-context.html
25 08 2019 20:09:06.947:DEBUG [web-server]: serving: /Users/vcarvalho/dev/mnv/node_modules/@open-wc/karma-esm/src/esm-context.html
25 08 2019 20:09:06.954:DEBUG [web-server]: serving: /Users/vcarvalho/dev/mnv/node_modules/karma/static/context.js

Error compiling: /components/titles/src/index.ts: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (14:4):

  12 | 
  13 | export class MnvTitles extends LitElement {
> 14 |    @property({ type: Number }) level = 1
     |    ^
  15 | 
  16 |    static get styles() {
  17 |       return stylesComponent
HeadlessChrome 76.0.3809 (Mac OS X 10.13.6) ERROR: 'failed to load element http://localhost:9876/base/components/titles/MnvTitles.spec.ts?8525a94f12f0c41695288ebc485408b90ce0d30a'
25 08 2019 20:09:09.149:DEBUG [HeadlessChrome 76.0.3809 (Mac OS X 10.13.6)]: CONFIGURING -> EXECUTING
  mnv-base
    ✔ works
25 08 2019 20:09:09.160:DEBUG [HeadlessChrome 76.0.3809 (Mac OS X 10.13.6)]: EXECUTING -> CONNECTED
25 08 2019 20:09:09.161:DEBUG [launcher]: CAPTURED -> BEING_KILLED
25 08 2019 20:09:09.162:DEBUG [launcher]: BEING_KILLED -> BEING_FORCE_KILLED

Finished in 0.011 secs / 0.002 secs @ 20:09:09 GMT-0300 (Brasilia Standard Time)

SUMMARY:
✔ 1 test completed
25 08 2019 20:09:09.163:DEBUG [karma-server]: Run complete, exiting.
25 08 2019 20:09:09.163:DEBUG [launcher]: Disconnecting all browsers
25 08 2019 20:09:09.163:DEBUG [launcher]: BEING_FORCE_KILLED -> BEING_FORCE_KILLED
25 08 2019 20:09:09.169:DEBUG [launcher]: Process ChromeHeadless exited with code null and signal SIGTERM
25 08 2019 20:09:09.170:DEBUG [temp-dir]: Cleaning temp dir /var/folders/st/1v9r0sf5015cthwt58lgmcd00000gn/T/karma-89714435
25 08 2019 20:09:09.195:DEBUG [launcher]: Finished all browsers
25 08 2019 20:09:09.195:DEBUG [launcher]: BEING_FORCE_KILLED -> FINISHED
25 08 2019 20:09:09.195:DEBUG [launcher]: FINISHED -> FINISHED

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
LarsDenBakkercommented, Aug 30, 2019

Ah I see, what’s missing in that case is babel: true in your config. You need to explicitly enable reading a custom babel config.

1reaction
LarsDenBakkercommented, Aug 28, 2019

I just updated the demo with the correct config, it’s working there: https://github.com/open-wc/open-wc/pull/775

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error testing Typescript files with Open WC Karma-ESM plugin
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...
Read more >
Documentation - Decorators - TypeScript
TypeScript Decorators overview. ... A Complete Guide to TypeScript Decorators ... This decorator does not prevent classes from sub-classing BugReport .
Read more >
Avoiding Import Issues in TypeScript Monorepos
Importing elements from the same library through the library's path mapping/through a barrel will cause issues for sure, whether that is circular dependencies...
Read more >
Decorators do not work as you might expect
While working on a library called ngx-template-streams, which in a nutshell allows you to work with e... Tagged with typescript, webdev, ...
Read more >
How To Use Decorators in TypeScript - DigitalOcean
As it is not a JavaScript feature yet, TypeScript offers its own implementation of decorators, under an experimental flag.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[es-dev-server] imports with a . are not resolved

Next page

[testing] register chai plugins type error