karma support for ES6 modules

[fvanderwielen]

Expected behaviour

Wiht most browsers landed ES6 modules in their current releases ( https://caniuse.com/#feat=es6-module ), it would be nice to still be able to unit test this javascript in all these browsers using karma, without transpilation.

Actual behaviour

Tests do not run:

• modules cannot import, due to the script tags injected not having type=module
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
• the start of karma is too soon, as it is an inline script which cannot be deferred to until after the frameworks are loaded.

Environment Details

• Karma version (output of karma --version): 5.5.1
• Relevant part of your karma.config.js file:frameworks: ['jasmine'],

Steps to reproduce the behaviour

1. build ES6 modules, production code and unit tests
2. try to run karma with them
3. see errors

Possible fix

I hacked my karma installation and jasmine adapter to get karma to run ES6 modules with latest stable chrome. To do so, I modified the following:

• modify karma/lib/middleware/karma.js#L35 to set the type of the script tags to module
  var SCRIPT_TYPE = { '.js': /* 'text/javascript', //HACK--> */ 'module', '.dart': 'application/dart' }
• modify karma/lib/middleware/karma.js#L129 to also host another javascript that can be loaded as a module by the contect.html and debug.html runners
  // serve karma.js, context.js, and debug.js var jsFiles = ['/karma.js', '/context.js', '/debug.js', '/karma-start.js']
• modify the contect.html and debug.html runners to not kickoff karma with an inline line, but place that line in a separate JS file, which is loaded as a module and therefore after all the other scripts for testing frameworks and tests:
  ` %SCRIPTS% <script type="module" src="karma-start.js"></script>

`

• add above mentioned JS file, karma\static\karma-start.js:
  window.__karma__.loaded();
• also fix jasmine to set itself on the window in the IIFE ( separate NPM module, so will refrain from diving into its details).

[EzraBrooks]

Please submit your fix as a pull request so it goes through all of the prerequisite testing. I would be happy to review a PR to introduce this feature.

[fvanderwielen]

Thanks for the quick reply!

I tried, NPM test is failing on a clean checkout, for reasons unclear to me:

Chrome 62.0.3202 (Windows 7 0.0.0) ERROR
  {
    "message": "Uncaught Error: Cannot find module 'D:\\github\\karma\\test\\client\\karma.spec.js'\nat node_modules/mocha/mocha.js:1:196\n\nError: Cannot find module 'D:\\github\\karma\\test\\client\\karma.spec.js'\n    at s (node_modules/mocha/mocha.js:1:156)\n    at s (node_modules/mocha/mocha.js:1:122)\n    at test/client/karma.spec.js:1:34",
    "str": "Uncaught Error: Cannot find module 'D:\\github\\karma\\test\\client\\karma.spec.js'\nat node_modules/mocha/mocha.js:1:196\n\nError: Cannot find module 'D:\\github\\karma\\test\\client\\karma.spec.js'\n    at s (node_modules/mocha/mocha.js:1:156)\n    at s (node_modules/mocha/mocha.js:1:122)\n    at test/client/karma.spec.js:1:34"
  }
Chrome 62.0.3202 (Windows 7 0.0.0): Executed 0 of 0 ERROR (0.776 secs / 0 secs)
Error: failed to add custom browserify preprocessor
{ Error: Cannot find module 'karma/lib/preprocessor'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\github\karma\node_modules\karma-browserify\lib\preprocessor.js:3:20)
    at Module._compile (module.js:635:30)
...
 code: 'MODULE_NOT_FOUND' }
    at callDone (D:\github\karma\node_modules\grunt-legacy-util\index.js:159:52)
    at ChildProcess.<anonymous> (D:\github\karma\node_modules\grunt-legacy-util\index.js:198:5)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

Fatal error: Client unit tests failed.
npm ERR! Test failed.  See above for more details.

npm version 5.5.1
node version 8.9.1
OS: windows 7...

Please advice on how to proceed. If this cannot be fixed within the short term, perhaps this could be taken care of by a custom karma middleware plugin for now? I am not sure though, I could not find any clear documentation on this subject yet.

Thanks!

[lusarz]

@fvanderwielen
I've found an workaround to 'MODULE_NOT_FOUND' issue. Go to karma/node_modules/karma-browserify/lib/preprocessor.js and change:

var preprocessor = require('karma/lib/preprocessor');
into:
var preprocessor = require('../../../../karma/lib/preprocessor');

I'm aware it's only an temporary solution, but maybe this tip will help someone to investigate/fix problem.

[peterblazejewicz]

I'm not able to contribute a PR due to failing Karma own test. The above work around works, but once it's fixed, the other error emerge, like Chrome 66.0.3355 (Mac OS X 10.13.3) stringify should serialize proxied functions FAILED AssertionError: 'function () { ... }' deepEqual 'Proxy(function abc(...) { ... })'
, and next one. It looks like this error was hiding the other ones
"version": "2.0.0",

[johnjbarton]

See #2942 concerning the Proxy fail

[jehon]

I have seen that the first part is integrated in karma 2.0.0: you have to specify files with (see https://karma-runner.github.io/2.0/config/files.html)
{ pattern: '*.js', type: 'module', ...}

For the second part, I have opened a second bug #2955, where I am trying to make a PR...

[luzhang]

Hey Karma team,

We use Karma and Karma Closure runner for unit testing. I wonder if you have an ETA about when Karma will support ES6 modules?

Thanks,
Lu

[johnjbarton]

I don't see any Pull Requests adding support for Es6 modules

[luzhang]

Thank you for the response!

I am wondering if Karma team plans to provide this ES6 module support soon, or it is low priority for the team so we need to wait for other contributors to add it?

[johnjbarton]

I believe there are or will be users motivated to contribute this feature.

[jehon]

There is some work already done here: #2834
And it is already possible to configure module for your script (see comment above):
{ pattern: '*.js', type: 'module', ...}
(But PR is required for it to works)

[tlaukkan]

It would be great to have this implemented.

[vitalets]

Does anybody managed to get it working with imports from node_modules?
#2834 (comment)

[Buslowicz]

Could anybody please implement this? If not, I will try to do it myself (taking the above experiences) and make a PR, just don't want to invest my time if someone else does it too. I would prefer somebody experienced with Karma do it, but if nobody will, I can at least try.

[johnjbarton]

Based on #3072 this feature is implemented. Please check the documentation, and if it is inadequate please send a fix. Or if the feature is incomplete, please open a detailed explanation.

[Buslowicz]

That is correct, after further experiments I managed to get it to work without modifying the karma code. Sorry for the confusion, I am still new to configuring karma (used it with Angular only so far) and seeing that issue open made me think I am doing it correctly - my mistake, I wasn't :).