Custom elements v1: Migration from karma version 3 to karma version 5 doesn't work

[dimitardanailov]

Greetings,

My name is Dimitar Danailov and I've been working on independent project. My projects uses custom web elements v1, karma, webpack and many others: https://github.com/dimitardanailov/gmail-helper. My project use karma-webpack version 3

Custom element v1 definition is:

class MyComponent extends HTMLElement {
  constructor() {
  }

  connectedCallback() {
  }
}

customElements.define('my-component', MyComponent)

karma-webpack version doesn't have an issue to test this configuration. Version 3 has difficulties to test connection between Child and Parent. The error in this situation is:

 "message": "Uncaught NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry\nat 
…

I fixed my problem with this "patch":

if (!customElements.get('child-component')) {
  customElements.define('child-component', ChildComponent)
}

Examples of my progress: Child -> https://github.com/dimitardanailov/gmail-helper/blob/master/develop/web/src/components/check-boxes/gmail-connected-text-fields/GmailConnectedCheckbox.js Parent -> https://github.com/dimitardanailov/gmail-helper/blob/master/develop/web/src/components/check-boxes/gmail-connected-text-fields/GmailConnectedTextFields.js

I had a conversation with @daKmoR. He gave me an advice to update my version from version 3 to version 5

Thomas Allmer @daKmoR Jan 12 18:12 @dimitardanailov are you using karma-webpack 5.x? (it's still an alpha release) I know that it's an issue with < 5.x that's why we created a new major version

Before twenty minutes I've updated my configurations from karma-version 3 to karma-version 5.

My karma configurations are:

const path = require('path')

module.exports = function(config) {
  config.set({

    // List of plugins to load. A plugin can be a string (in which case it will be required by Karma) 
    // or an inlined plugin - Object. 
    // By default, Karma loads all sibling NPM modules which have a name starting with karma-*.
    plugins: [
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-mocha',
      'karma-sourcemap-loader',
      'karma-webpack'
    ],

    // run in Chrome and Firefox
    browsers: [
      'ChromeHeadless', 
      'FirefoxHeadless'
    ],

    customLaunchers: {
      FirefoxHeadless: {
        base: 'Firefox',
        flags: [ '-headless' ],
        displayName: 'FirefoxHeadless'
      },
    },

    frameworks: ['mocha'],

    files: [
      { 
        pattern: path.resolve(__dirname, './node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'), 
        watched: false 
      },
      { 
        pattern: path.resolve(__dirname, './node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js'), 
        watched: false 
      },
      {
        pattern: path.resolve(__dirname, './tools/testing-helper.js'),
        watched: false
      },
      { 
        pattern: 'src/components/*.unittest.js', 
        watched: false 
      },
      { 
        pattern: 'src/components/**/*.unittest.js', 
        watched: false 
      },
      { 
        pattern: 'src/components/**/**/*.unittest.js', 
        watched: false 
      }
    ],

    preprocessors: {
      // add webpack as preprocessor
      'src/components/*.unittest.js': [ 'webpack', 'sourcemap' ],
      'src/components/**/*.unittest.js': [ 'webpack', 'sourcemap' ],
      'src/components/**/**/*.unittest.js': [ 'webpack', 'sourcemap' ],
    },

    webpack: {
      // karma watches the test entry points
      // (you don't need to specify the entry option)
      // webpack watches dependencies

      // just do inline source maps instead of the default
      devtool: 'inline-source-map', 
      mode: 'development',

      resolve: {
        modules: [
          path.resolve(__dirname, './node_modules')
        ]
      }
    },

    webpackServer: {
      // noInfo: true // please don't spam the console when running in karma!
    },

    reporters: ['progress'],

    // karma web server port
    port: 9876,  

    // Enable or disable colors in the output (reporters and logs).
    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: false,

    // Karma captures browsers, runs the tests and exits
    singleRun: true, 

    // Especially on services like SauceLabs and Browserstack, it makes sense only to 
    // launch a limited amount of browsers at once, and only start more when those have finished. 
    // Using this configuration, you can specify how many browsers 
    // should be running at once at any given point in time.
    concurrency: Infinity
  })
}

with these configurations and karma version 5 I can't run mu tests:

Log output is:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/11.6.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'test-unit' ]
2 info using npm@6.5.0
3 info using node@v11.6.0
4 verbose run-script [ 'pretest-unit', 'test-unit', 'posttest-unit' ]
5 info lifecycle gmail-helper-web@1.0.0~pretest-unit: gmail-helper-web@1.0.0
6 info lifecycle gmail-helper-web@1.0.0~test-unit: gmail-helper-web@1.0.0
7 verbose lifecycle gmail-helper-web@1.0.0~test-unit: unsafe-perm in lifecycle true
8 verbose lifecycle gmail-helper-web@1.0.0~test-unit: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/mitko/Workspace/nodejs/gmail-helper/develop/web/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/mitko/Workspace/nodejs/gmail-helper/develop/web/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/usr/local/share/dotnet:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/mitko/Library/Enthought/Canopy_64bit/User/bin:/Users/mitko/.nvm/versions/node/v10.15.0/bin:/Users/mitko/.rvm/gems/ruby-2.4.0/bin:/Users/mitko/.rvm/gems/ruby-2.4.0@global/bin:/Users/mitko/.rvm/rubies/ruby-2.4.0/bin:/Users/mitko/.rvm/bin:/Users/mitko/.local/bin:/usr/local/mysql/bin:/usr/local/Caskroom/google-cloud-sdk/latest/google-cloud-sdk/bin
9 verbose lifecycle gmail-helper-web@1.0.0~test-unit: CWD: /Users/mitko/Workspace/nodejs/gmail-helper/develop/web
10 silly lifecycle gmail-helper-web@1.0.0~test-unit: Args: [ '-c', './node_modules/karma/bin/karma start' ]
11 silly lifecycle gmail-helper-web@1.0.0~test-unit: Returned: code: 1  signal: null
12 info lifecycle gmail-helper-web@1.0.0~test-unit: Failed to exec test-unit script
13 verbose stack Error: gmail-helper-web@1.0.0 test-unit: `./node_modules/karma/bin/karma start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:188:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:188:13)
13 verbose stack     at maybeClose (internal/child_process.js:978:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
14 verbose pkgid gmail-helper-web@1.0.0
15 verbose cwd /Users/mitko/Workspace/nodejs/gmail-helper/develop/web
16 verbose Darwin 18.2.0
17 verbose argv "/usr/local/Cellar/node/11.6.0/bin/node" "/usr/local/bin/npm" "run" "test-unit"
18 verbose node v11.6.0
19 verbose npm  v6.5.0
20 error code ELIFECYCLE
21 error errno 1
22 error gmail-helper-web@1.0.0 test-unit: `./node_modules/karma/bin/karma start`
22 error Exit status 1
23 error Failed at the gmail-helper-web@1.0.0 test-unit script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I'm frankly with you guys. The log output for me is not useful and I'd like to discuss with this group my issue.

Screenshot with version 3:

If you someone wants more information: I'll be happy to provide.

[daKmoR]

just a quick shot from the hip...

// needs also webpack as a framework
frameworks: ['mocha', 'webpack'],

Also if you use this especially with webcomponents maybe this can be of some inspiration? https://open-wc.org/testing/

[dimitardanailov]

@daKmoR

Greetings and Hi ✋

We had a conversation on Gitter. My test follows your examples: https://github.com/dimitardanailov/gmail-helper/blob/master/develop/web/src/components/labels/backgrounds/GmailLabelBackgroundColor.unittest.js

https://open-wc.org/testing configurations are 🚀 I can't use yeoman karma configurations because with them I can't run my unit test :) I've plans to make a migration line - line by because I'd like to use https://open-wc.org/testing yeoman karma configuration but my app is not ready, yet.

[daKmoR]

hey, can you maybe push a branch so that I can check the actual failing code out?

[dimitardanailov]

@daKmoR

I was busy last several days. I did FOSDEM 2019 :)

Please check use this version of source: https://github.com/dimitardanailov/gmail-helper/tree/webpack-karma-v5

develop/web/ contains custom elements. Quick link to karma-webpack version -> https://github.com/dimitardanailov/gmail-helper/blob/webpack-karma-v5/develop/web/package.json#L66

If you a question or an additional information please contact me.

[daKmoR]

I copied some configs from open-wc and adjusted a few things and it started working for me.

I made a pull request with the changes: https://github.com/dimitardanailov/gmail-helper/pull/1 🤗

to clean it up and readd some of those extra plugin I will leave as your homework 😛