preprocessor change between v4 & v5 leading to error when used with karma-mocha

[subodhkumar]

• Operating System: MacOS
• Node Version: 14
• NPM Version: 6
• webpack Version: 5
• karma-webpack Version: 5

Expected Behavior

karma-webpack should work well with karma-mocha

Actual Behavior

This is related to executing the functional tests with karma,karma-webpack & karma-mocha

• we use karma-mocha v2. Which has the following code to add files to existing fileList passed to webpack plugin
• in karma-webpack v4, the preprocessor had the code to include files which were not part of entryPoints & compile them & make it available.
• in karma-webpack v5, the preprocessor code is changed to skip the inclusion of files & just includes the entryPoints for compilation.

In our usecase where we recently updated the karma-webpack, we are facing errors as few files are not available post preprocessing causing the karma server to fail.

Not sure if the change is a bug or intended. Just wanted to understand the reason behind the change. Appreciate if there are any workarounds & corrections in my understanding of the code.

[codymikol]

In v5 you can require all of the files you want to include in your entry point rather than pass them in via configuration. Let me know if that works for you.

[subodhkumar]

Thanks for the response. In our use case we have set all the entrypoints.

however as shared above karma-mocha is adding few files which is not configured by us. With v5 as karma-webpack as it’s not adding files in the preprocessor those files are part of bundle output causing the error.

Are you recommending to import(set in the entry section) the files added by karma-mocha by us explicitly.

[codymikol]

Which files are karma-mocha adding?

[codymikol]

Are you recommending to import(set in the entry section) the files added by karma-mocha by us explicitly.

If you mean these files are created by you and added in your mocha config, yes, this should fix your problem.

[subodhkumar]

Which files are karma-mocha adding?

karma-mocha is adding karma-mocha/src/adapter.js

[subodhkumar]

Are you recommending to import(set in the entry section) the files added by karma-mocha by us explicitly.

If you mean these files are created by you and added in your mocha config, yes, this should fix your problem.

the files are not created by us, but are added by karma-mocha. These files used to be picked up by karma-webpack v4 here. But not anymore in v5

[codymikol]

Can you post the error that you're getting and configs for webpack / karma / mocha? We have integration tests for karma-mocha so I know its possible to use in v5.

[subodhkumar]

Hi @codymikol,

In our project, we construct a customTest.js at the root level of project which has import to all the test-entry points for the project. We trigger the karma process from the root level on the customTest.js. In our karma.config.js we have the following entry of preprocessor

preprocessors: {'**/*.js': ['webpack']}, // include add JS files from project root

I checked the integration tests in karma-webpack & checked how its working. I was able to simulate the error we are facing by making changes to one of the tests(link to the forked karma-webpack project with the code changes: #1, #2)

I have updated the preprocessor entries to point to the root location of the project as we have in our project. If you could clone the forked project & execute npm run test you will see the below error which we are getting.

This error is thrown as the js files(#file1, #file2) added by karma-mocha as allowed to be processed by the karma-webpack plugin due to the updated preprocessor pattern in karma config. However, with v5 the plugin is not allowing any new file additions as compared to v4

As the plugin is skipping the files added by karma-mocha(or plugin which might have similar code) the following code in karma is finding empty content for files added by karma-mocha & causing the error while setting sha1 to undefined

Hope this conveys the issue.

I have the below followup queries.

• Is setting the preprocessor path at the root level a valid entry?
• if Yes, should this error be a bug?
• If No, karma-webpack v4 used to allow it. Should this change in option be documented.

Thanks again for your time in checking & responding. Really appreciate it.

[codymikol]

This is trying to run the webpack preprocessor on all files in the repository including node_modules via globbing, try using a single file that specifies exactly what you want to import like the index.scenario.js file.

[subodhkumar]

So is including the files on node_modules as part of preprocessor pattern invalid? If so, this used to work in karma-we pack v4. Also, any reason for removing add files code in v5?

[codymikol]

The new pattern essentially just recursively imports everything, so there shouldn't be a need to specify what those files might be

index.test.ts
  requireAll('./tests/**/*/*.spec.js') -> this imports all test cases
  require('./src/index.ts') -> this imports all node_modules / source code needed for your app

[codymikol]

note that requireAll isn't actually a node built in, I use require.context to find and require all my test cases and alias it as requireAll.

[subodhkumar]

The new pattern essentially just recursively imports everything, so there shouldn't be a need to specify what those files might be

index.test.ts
  requireAll('./tests/**/*/*.spec.js') -> this imports all test cases
  require('./src/index.ts') -> this imports all node_modules / source code needed for your app

Can you please explain what is new pattern you are referring here

[codymikol]

Can you share your project or at least configurations? I may be able to point you in the right direction.

[subodhkumar]

Updated the preprocessor pattern to include only test files to address the issue we faced. Thanks for the support