Yarn Plug'n'Play and Karma

Emil — Tue, 24 Sep 2019 13:19:33 +0000

After turning on Plug'n'Play feature on the Yarn, I faced a problem with running our javascript tests. Strictly speaking, Karma couldn't run at all.

Console was saying:

./node_modules/.bin/karma: No such file or directory

I quickly realised that I call binary directly by the path, but node_modules is empty, so I need to get new path. That wasn't a big problem, just to get a path of an executable: yarn bin karma, and for its running simply: yarn run karma.

Then I got running Karma, but not tests:

ERROR [preprocess]: Can not load "webpack", it is not registered!
ERROR [karma-server]: Server start failed on port 9878: Error: No provider for "framework:jasmine"!

Here is a slice of configuration file:

// karma.config.js:
{
   ...
   browsers: ['Chrome'],
   frameworks: ['jasmine'],
   preprocessors: {
       './app/javascript/**/*.test.js': ['webpack']
   },
   ...
}

After doing some research in the web I didn't find any working solution. So I've opened source code of Karma and its dependency injection library. I've found that Karma loads its plugins on the fly by scanning all available plugins (preprocessors, testing frameworks, browser launchers etc.). (If I were more attentive and read the documentation properly there would be no problems.) But Yarn with enabled PnP has different directory structure, so Karma doesn't see any plugins.

The thing we just need to do is specify plugins strictly in the configuration and add them to your package.json as dependencies.

// karma.config.js:
{
    ...
    plugins: [
        'karma-jasmine',
        'karma-webpack',
        'karma-chrome-launcher',
    ],
    ...
}

Conclusion

By enabling Plug'n'Play be more careful with working with relative paths of libraries. And don't forget to specify all your explicit and implicit dependencies in your package.json.

DEV Community: Emil

Yarn Plug'n'Play and Karma

Conclusion