New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

karma support for ES6 modules #2903

Closed
fvanderwielen opened this Issue Dec 6, 2017 · 16 comments

Comments

Projects
None yet
10 participants
@fvanderwielen

fvanderwielen commented Dec 6, 2017

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:

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

This comment has been minimized.

Collaborator

EzraBrooks commented Dec 6, 2017

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

This comment has been minimized.

fvanderwielen commented Dec 7, 2017

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

This comment has been minimized.

Collaborator

lusarz commented Dec 31, 2017

@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

This comment has been minimized.

peterblazejewicz commented Mar 2, 2018

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

This comment has been minimized.

Collaborator

johnjbarton commented Mar 3, 2018

See #2942 concerning the Proxy fail

@jehon

This comment has been minimized.

jehon commented Mar 14, 2018

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

This comment has been minimized.

luzhang commented May 24, 2018

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

This comment has been minimized.

Collaborator

johnjbarton commented May 25, 2018

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

@luzhang

This comment has been minimized.

luzhang commented May 25, 2018

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

This comment has been minimized.

Collaborator

johnjbarton commented May 25, 2018

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

@jehon

This comment has been minimized.

jehon commented May 26, 2018

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

This comment has been minimized.

tlaukkan commented Jun 6, 2018

It would be great to have this implemented.

@vitalets

This comment has been minimized.

vitalets commented Jul 27, 2018

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

@Draccoz

This comment has been minimized.

Draccoz commented Dec 5, 2018

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

This comment has been minimized.

Collaborator

johnjbarton commented Dec 5, 2018

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.

@johnjbarton johnjbarton closed this Dec 5, 2018

@Draccoz

This comment has been minimized.

Draccoz commented Dec 7, 2018

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 :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment