search

codymikol / karma-webpack

Karma webpack Middleware
MIT License
829 stars 222 forks source link

Support Karma 6 #462

Closed nicojs closed 3 years ago

nicojs commented 3 years ago

Feature Proposal

Karma 6 just released yesterday but doesn't seem to be supported by karma-webpack.

ERROR [karma-server]: Error during file loading or preprocessing
  TypeError: process is not a function
      at executeProcessor (/home/nicojs/github/stryker/e2e/node_modules/karma/lib/preprocessor.js:47:11)
      at runProcessors (/home/nicojs/github/stryker/e2e/node_modules/karma/lib/preprocessor.js:60:23)
      at FileList.preprocess [as _preprocess] (/home/nicojs/github/stryker/e2e/node_modules/karma/lib/preprocessor.js:134:11)
      at async Promise.all (index 0)
      at /home/nicojs/github/stryker/e2e/node_modules/karma/lib/file-list.js:90:11
      at async Promise.all (index 4)

Maybe this has to do with customFileHandlers being injected?

https://github.com/ryanclark/karma-webpack/blob/3cc35b33e14405e65b8f91505f212b0b035f8cc0/src/karma-webpack.js#L56

This is no longer supported: https://github.com/karma-runner/karma/blob/master/CHANGELOG.md#breaking-changes

codymikol commented 3 years ago

I'll take a look at this today, thanks for making an issue.

marc-mabe commented 3 years ago

After upgrade to karma 6 I get some additional errors:

ERROR [preprocess]: Can not load "webpack"!
  Error: No provider for "customFileHandlers"! (Resolving: preprocess -> preprocessor:webpack -> webpackPlugin -> customFileHandlers)
    at error (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:22:12)
    at Object.get (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:9:13)
    at get (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:54:19)
    at /Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:71:14
    at Array.map (<anonymous>)
    at invoke (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:70:31)
    at Array.instantiate (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:59:20)
    at get (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:48:43)
    at /Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:71:14
    at Array.map (<anonymous>)
    at Array.invoke (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/myuser/myworkspace/frontend/node_modules/karma/lib/preprocessor.js:84:20)
    at Array.forEach (<anonymous>)
    at createPriorityPreprocessor (/Users/myuser/myworkspace/frontend/node_modules/karma/lib/preprocessor.js:101:43)
    at Array.invoke (/Users/myuser/myworkspace/frontend/node_modules/di/lib/injector.js:75:15)

<snip>

ERROR [karma-server]: Error during file loading or preprocessing
TypeError: process is not a function
    at executeProcessor (/Users/myuser/myworkspace/frontend/node_modules/karma/lib/preprocessor.js:47:11)
    at runProcessors (/Users/myuser/myworkspace/frontend/node_modules/karma/lib/preprocessor.js:60:23)
    at FileList.preprocess [as _preprocess] (/Users/myuser/myworkspace/frontend/node_modules/karma/lib/preprocessor.js:134:11)

<snip>

ERROR [karma-server]: Error: Found 1 load error
    at Server.webServer.listen (/Users/myuser/myworkspace/frontend/node_modules/karma/lib/server.js:205:26)
    at Object.onceWrapper (events.js:286:20)
    at Server.emit (events.js:203:15)
    at emitListeningNT (net.js:1314:10)
    at process._tickCallback (internal/process/next_tick.js:63:19)
codymikol commented 3 years ago

@nicojs @marc-mabe Could you let me know if karma 6 works for you using 5.0.0-alpha.5 of karma-webpack? I recently added integration tests to the next branch that still pass when using karma 6

Hypnosphi commented 3 years ago

Will it be possible to use webpack 4 with karma 6?

codymikol commented 3 years ago

Will it be possible to use webpack 4 with karma 6?

Integration tests pass using a combination of

webpack 4.46.0
karma-webpack 5.0.0-alpha.5
karma 6.0.0
Hypnosphi commented 3 years ago

Why does karma-webpack@5.0.0-alpha.5 require webpack@5 in peerDependencies then?

codymikol commented 3 years ago

Why does karma-webpack@5.0.0-alpha.5 require webpack@5 in peerDependencies then?

It's aimed at supporting webpack 5, I don't believe that we want to continue to officially support older versions in the next release.

Regardless, I don't think anything should stop you from including an older peerDependency, usually this just results in a warning like this. I have a project that builds using karma-webpack 5.0.0-alpha.5 and webpack 5.0.0 with no issues.

warning " > karma-webpack@5.0.0-alpha.5" has incorrect peer dependency "webpack@^5.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.

What is the actual error that you see?

Hypnosphi commented 3 years ago

I don't think anything should stop you from including an older peerDependency

NPM 7 forbids installing unmatched peer dependencies. I don’t use it yet, but eventually I will

What is the actual error that you see?

Will check

Hypnosphi commented 3 years ago

It just doesn't run any tests and exits with 1

> karma start

Webpack bundling...
Hash: 7063bfa269bf716df63e
Version: webpack 4.46.0
Time: 13624ms
Built at: 01/14/2021 8:52:27 PM
                      Asset       Size                Chunks                   Chunk Names
                 commons.js   14.6 MiB               commons  [emitted]        commons
             commons.js.map   14.6 MiB               commons  [emitted] [dev]  commons
                 runtime.js   7.55 KiB               runtime  [emitted]        runtime
             runtime.js.map   7.59 KiB               runtime  [emitted] [dev]  runtime
    test-suite.336011956.js  208 bytes  test-suite.336011956  [emitted]        test-suite.336011956
test-suite.336011956.js.map  100 bytes  test-suite.336011956  [emitted] [dev]  test-suite.336011956
Entrypoint test-suite.336011956 = runtime.js runtime.js.map commons.js commons.js.map test-suite.336011956.js test-suite.336011956.js.map (prefetch: commons.js commons.js.map)
14 01 2021 20:52:27.759:INFO [karma-server]: Karma v6.0.0 server started at http://localhost:9877/
14 01 2021 20:52:27.760:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
14 01 2021 20:52:27.764:INFO [launcher]: Starting browser ChromeHeadless
14 01 2021 20:52:28.200:INFO [Chrome Headless 88.0.4298.0 (Mac OS 11.0.0)]: Connected on socket qG57aRCcxvktND_bAAAB with id 31994996
Chrome Headless 88.0.4298.0 (Mac OS 11.0.0): Executed 0 of 0 SUCCESS (0.001 secs / 0 secs)
TOTAL: 0 SUCCESS
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @jetbrains/ring-ui@3.1.2 test: `karma start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @jetbrains/ring-ui@3.1.2 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The repo is https://github.com/JetBrains/ring-ui/tree/dependabot/npm_and_yarn/karma-6.0.0 and the command is npm run test

codymikol commented 3 years ago

It just doesn't run any tests and exits with 1

> karma start

Webpack bundling...
Hash: 7063bfa269bf716df63e
Version: webpack 4.46.0
Time: 13624ms
Built at: 01/14/2021 8:52:27 PM
                      Asset       Size                Chunks                   Chunk Names
                 commons.js   14.6 MiB               commons  [emitted]        commons
             commons.js.map   14.6 MiB               commons  [emitted] [dev]  commons
                 runtime.js   7.55 KiB               runtime  [emitted]        runtime
             runtime.js.map   7.59 KiB               runtime  [emitted] [dev]  runtime
    test-suite.336011956.js  208 bytes  test-suite.336011956  [emitted]        test-suite.336011956
test-suite.336011956.js.map  100 bytes  test-suite.336011956  [emitted] [dev]  test-suite.336011956
Entrypoint test-suite.336011956 = runtime.js runtime.js.map commons.js commons.js.map test-suite.336011956.js test-suite.336011956.js.map (prefetch: commons.js commons.js.map)
14 01 2021 20:52:27.759:INFO [karma-server]: Karma v6.0.0 server started at http://localhost:9877/
14 01 2021 20:52:27.760:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
14 01 2021 20:52:27.764:INFO [launcher]: Starting browser ChromeHeadless
14 01 2021 20:52:28.200:INFO [Chrome Headless 88.0.4298.0 (Mac OS 11.0.0)]: Connected on socket qG57aRCcxvktND_bAAAB with id 31994996
Chrome Headless 88.0.4298.0 (Mac OS 11.0.0): Executed 0 of 0 SUCCESS (0.001 secs / 0 secs)
TOTAL: 0 SUCCESS
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @jetbrains/ring-ui@3.1.2 test: `karma start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @jetbrains/ring-ui@3.1.2 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The repo is https://github.com/JetBrains/ring-ui/tree/dependabot/npm_and_yarn/karma-6.0.0 and the command is npm run test

You need to include webpack as a framework in your karma config. I see its currently missing from your project.

Hypnosphi commented 3 years ago

That helped, thanks!

codymikol commented 3 years ago

I can confirm we do not use customFileHandlers in the latest release of karma-webpack and that I have had success in using the plugin with karma 6 on the latest version 5.0.0-alpha.5

nicojs commented 3 years ago

Our integration test is still failing with 5.0.0-alpha.5 https://github.com/stryker-mutator/stryker/pull/2692/checks?check_run_id=1708326043

Might be unrelated to this issue though, needs more investigation. Will do that ASAP (later today), but have some other stuff to do now.

andrewm-mitchells commented 3 years ago

Experiencing the same problem here. Was going to add tests to existing NativeScript Angular application but it fails when I run ns test ios with the following error.

15 01 2021 15:57:56.325:ERROR [preprocess]: Can not load "webpack"!
  Error: No provider for "customFileHandlers"! (Resolving: preprocess -> preprocessor:webpack -> webpackPlugin -> customFileHandlers)
    at error (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:22:12)
    at Object.get (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:9:13)
    at get (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:54:19)
    at /Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:71:14
    at Array.map (<anonymous>)
    at invoke (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:70:31)
    at Array.instantiate (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:59:20)
    at get (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:48:43)
    at /Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:71:14
    at Array.map (<anonymous>)
    at Array.invoke (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/andrew/Mobile/karma-ns-7/node_modules/karma/lib/preprocessor.js:84:20)
    at Array.forEach (<anonymous>)
    at createPriorityPreprocessor (/Users/andrew/Mobile/karma-ns-7/node_modules/karma/lib/preprocessor.js:101:43)
    at Array.invoke (/Users/andrew/Mobile/karma-ns-7/node_modules/di/lib/injector.js:75:15)
15 01 2021 15:57:56.357:ERROR [karma-server]: Error during file loading or preprocessing
TypeError: process is not a function
    at executeProcessor (/Users/andrew/Mobile/karma-ns-7/node_modules/karma/lib/preprocessor.js:47:11)
    at runProcessors (/Users/andrew/Mobile/karma-ns-7/node_modules/karma/lib/preprocessor.js:60:23)
    at FileList.preprocess [as _preprocess] (/Users/andrew/Mobile/karma-ns-7/node_modules/karma/lib/preprocessor.js:134:11)
    at async Promise.all (index 0)
    at async /Users/andrew/Mobile/karma-ns-7/node_modules/karma/lib/file-list.js:90:11
    at async Promise.all (index 3)
15 01 2021 15:57:56.383:INFO [karma-server]: Karma v6.0.0 server started at http://localhost:9876/
15 01 2021 15:57:56.383:INFO [launcher]: Launching browsers ios with concurrency unlimited
15 01 2021 15:57:56.383:ERROR [karma-server]: Error: Found 1 load error
    at Server.<anonymous> (/Users/andrew/Mobile/karma-ns-7/node_modules/karma/lib/server.js:205:26)
    at Object.onceWrapper (events.js:420:28)
    at Server.emit (events.js:326:22)
    at emitListeningNT (net.js:1351:10)
    at processTicksAndRejections (internal/process/task_queues.js:83:21)
Test run failed.

What would be the best way to fix this?

codymikol commented 3 years ago

@andrewm-mitchells are you using karma-webpack 5.0.0-alpha.5 ?

andrewm-mitchells commented 3 years ago

@andrewm-mitchells are you using karma-webpack 5.0.0-alpha.5 ?

Thank you for suggesting that. I was on 3.0.5, after updating to 5.0.0-alpha.5 the error is gone but I get blank screen in the app and a bunch of console logs.

Not sure if it relates to Karma at this point or NativeScript. Will continue investigating.

Webpack build done!
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
Successfully transferred all files on device DF60258A-B86C-4E93-BCEF-4E2ED154E007.
Restarting application on device DF60258A-B86C-4E93-BCEF-4E2ED154E007...
Successfully synced application org.nativescript.karmans7 on device DF60258A-B86C-4E93-BCEF-4E2ED154E007.
(RunningBoardServices) [com.apple.runningboard:connection] Identity resolved as application<org.nativescript.karmans7>
CONSOLE LOG: NSUTR: fetching http://127.0.0.1:9876/context.json
CONSOLE LOG: NSUTR: fetching http://172.16.1.6:9876/context.json
CONSOLE LOG: NSUTR: fetching http://172.16.1.4:9876/context.json
CONSOLE LOG: NSUTR: found karma at 172.16.1.4
CONSOLE LOG: NSUTR: connecting to karma at http://172.16.1.4:9876
CONSOLE LOG: ReferenceError: window is not defined
CONSOLE LOG: NSUTR: found karma at 127.0.0.1
CONSOLE LOG: NSUTR: found karma at 172.16.1.6
nicojs commented 3 years ago

@codymikol

I have an issue with the alfa.5 version. I'm getting 

15 01 2021 17:32:52.126:INFO [Chrome Headless 87.0.4280.88 (Linux x86_64)]: Connected on socket 5g4nF7Yfkio9LTFjAAAB with id 86358983
Chrome Headless 87.0.4280.88 (Linux x86_64): Executed 0 of 0 SUCCESS (0.002 secs / 0 secs)
TOTAL: 0 SUCCESS

(no tests found)

I'm using the alternative usage from the readme, is that still supported?

Reproduce by extracting this file and run npm i and npm t.

karma-webpack-with-ts.zip

codymikol commented 3 years ago

@nicojs the test folder in that repro is empty, also you need to add webpack to your list of frameworks in karma.conf

I made those adjustments and everything seems to work

karma-webpack-with-ts.zip

josejulio commented 3 years ago

I have an issue with 5.0.0-alpha.5 in my case the browser opens and closes immediately with the following error on the console:

14 01 2021 22:00:46.068:ERROR [karma-server]: UnhandledRejection: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, TypedArray, or DataView. Received type undefined
    at Hash.update (internal/crypto/hash.js:58:11)
    at Object.sha1 (/home/travis/build/RedHatInsights/policies-ui-frontend/node_modules/karma/lib/utils/crypto-utils.js:9:8)
    at runProcessors (/home/travis/build/RedHatInsights/policies-ui-frontend/node_modules/karma/lib/preprocessor.js:70:26)

This is my karma.conf file https://github.com/RedHatInsights/policies-ui-frontend/blob/ad7654587474ae0eef5672decd3c8af117f07691/config/karma.conf.ts

Any idea where I could look?

nicojs commented 3 years ago

Hi @codymikol , thanks for the fast response.

Adding webpack to the list of frameworks in karma did the trick. Strange, I didn't see anything about it in the readme. Is this something new?

I've added the original tests to zip, so this complete example should work now: karma-webpack-with-ts.zip

I can also confirm that this works with webpack 4.x

codymikol commented 3 years ago

@nicojs glad you got it working. The webpack requirement is new, I'm planning on making a PR that will automatically add that if it's missing, it seems to be a big pain point.

codymikol commented 3 years ago

I'll leave this issue open for those looking to troubleshoot karma 6 configuration until 5.0.0 is released

nicojs commented 3 years ago

And when are you planning on releasing v5?

codymikol commented 3 years ago

And when are you planning on releasing v5?

I want to clean up some of the remaining pain points before the official release, I don't have a real timeline on that unfortunately.

donkirkby commented 3 years ago

The Karma project restored customFileHandlers in release 6.0.1 to give plugins like this more time to prepare.

codymikol commented 3 years ago

Thanks @donkirkby !

We just released an alpha.6 version that will automatically set the webpack framework, which seems to be the root of this ticket, I'm going to close this unless you're experiencing more issues.

Hopefully a stable v5 will be out in the next two weeks, I want to further investigate some of the requirements in our docs and see if we can avoid having to specify them entirely.

codymikol commented 3 years ago

v5 is now available