How can we test our js components ?

[Rebolon]

Hi,
I build vuejs or react components and i need to be able to run tests and i'm wondering how to do unit/e2e tests when we use encore. I don't find anythig about this in the documentation.
Any idea ?
thanks a lot

[Lyrkan]

Hey @Rebolon,

Here is a small example I made a while ago that uses Karma/Jasmine: https://github.com/Lyrkan/encore-typescript-karma

If you look at the karma.conf.js file you'll see that you need to call Encore.configureRuntimeEnvironment before requiring your webpack.config.js file in order for Encore to know about which environment you want to use during your tests (you'll get an error if you forget to do that).

[weaverryan]

Hey @Lyrkan!

This is a great answer. I think we should add something to the docs to help people. Wdyt?

[Lyrkan]

Hi Ryan,

I thought about it when I was toying around with karma but wasn't really happy with some of the tweaks needed to make it work.

For instance, without that part the ManifestPlugin tries to create its files using an invalid path... still not sure why:

// Set writeToFileEmit option of the ManifestPlugin to false
for (const plugin of webpackConfig.plugins) {
  if ((plugin instanceof ManifestPlugin) && plugin.opts) {
    plugin.opts.writeToFileEmit = false;
  }
}

Or the fact that you are supposed to remove the entry point since Karma handles it itself:

// Remove entry property (handled by Karma)
delete webpackConfig.entry;

[Rebolon]

Thanks for the answer @Lyrkan, i'll test it quickly.

[Rebolon]

i've tried and get the following error:

{
    "message": "Uncaught ReferenceError: webpackJsonp is not defined\nat assets/js/vuejs/tests/index.js:1:1\n\nReferenceError: webpackJsonp is not defined\n    at assets/js/vuejs/tests/index.js:1:1",
    "str": "Uncaught ReferenceError: webpackJsonp is not defined\nat assets/js/vuejs/tests/index.js:1:1\n\nReferenceError: webpackJsonp is not defined\n    at assets/js/vuejs/tests/index.js:1:1"
  }

Here is the PR which will improve the lisibility:
https://github.com/Rebolon/php-sf-flex-webpack-encore-vuejs/compare/feature/test-with-karma?expand=1

[Lyrkan]

@Rebolon It looks like it's caused by the CommonsChunkPlugin (which is used because you call createSharedEntry in your webpack.config.js file), see codymikol/karma-webpack#24

I guess you could try removing it manually in your karma.conf.js file:

// webpack.config.js
const Encore = require('@symfony/webpack-encore')
const ManifestPlugin = require('@symfony/webpack-encore/lib/webpack/webpack-manifest-plugin')
+ const webpack = require('webpack');

// Initialize Encore before requiring the .config file
Encore.configureRuntimeEnvironment('dev-server')

// Retrieve webpack config
const webpackConfig = require('./webpack.config')

// Set writeToFileEmit option of the ManifestPlugin to false
for (const plugin of webpackConfig.plugins) {
    if ((plugin instanceof ManifestPlugin) && plugin.opts) {
        plugin.opts.writeToFileEmit = false
    }
}

+ // Remove CommonsChunkPlugin
+ webpackConfig.plugins = webpackConfig.plugins.filter(plugin => !(plugin instanceof webpack.optimize.CommonsChunkPlugin));

// Remove entry property (handled by Karma)
delete webpackConfig.entry

[weaverryan]

@Lyrkan I don’t know a lot about this, but it looks nasty - a lot of hacking to get it working. Is this unique to Karma, or is it something that will affect most test frameworks? Is there something we can add to Encore. This is the kind of stuff that it could (in theory) make easier :)

[Rebolon]

thanks a lot @Lyrkan it works great now

[pscheit]

would be great if this could be reopened and be fixed in a non-that-much-hacking way =)

[weaverryan]

Yea, let’s re-open - this could at least be a docs issue.

In Webpack 4, the commons chunk plugin is removed.

[Lyrkan]

@pscheit We'll have to check if that can be done more easily with Webpack 4 (see #324) since the CommonsChunkPlugin will be gone.

[pscheit]

I see, I'll recheck then, when upgrading to Webpack4