Get config for testing configuration (Karma)

[mgiraud]

Hello,

I'm using the vue-loader and i'd like to test unit my code.

As shown in the webpack template https://github.com/vuejs-templates/webpack, you need to get the Webpack config for the karma.conf.js.

//karma.conf.js

var webpackConfig = require('../../build/webpack.test.conf')

The problem is that getting the webpack config without using the encore binary doesn't work.

Invalid config file!
  Error: Are you trying to require index.js directly?

Is there any way to get the wepack config or is there an other way to setup karmaJs for webpack-encore ?

Thx

[Lyrkan]

Hi,

After quickly looking at it, I'm not sure there is an easy way to do that right now.

You could probably try something like:

// Generate Encore runtimeConfig
const context = require('@symfony/webpack-encore/lib/context');
const parseRuntime = require('@symfony/webpack-encore/lib/config/parse-runtime');

const encoreArgs = ['dev-server'];
context.runtimeConfig = parseRuntime(
  require('yargs').parse(encoreArgs),
  process.cwd()
);

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

But:

• it's cleary a hack and may not work anymore if a new version of Encore comes out
• when I tried it I ended up getting another error from Karma caused by the ManifestPlugin

[Lyrkan]

I got it to work (without vue.js, but that shouldn't be an issue) by setting the writeToFileEmit option of the ManifestPlugin to false: https://github.com/Lyrkan/encore-typescript-karma

[mgiraud]

Works Great ! Thx @Lyrkan

[Lyrkan]

Not sure we should close that issue though, the fact that this workaround is needed doesn't feel right ^^' (cc @weaverryan)

[weaverryan]

Indeed @Lyrkan - thanks for asking that this be re-opened. Nice hack btw - you're 100% right that this is the only way to accomplish this right now - but not a good way :).

The requirement seems clear: be able to easily require your webpack.config.js file from a non ./node_module/.bin/encore context. What about an API that looks something like this:

const Encore = require('@symfony/webpack-encore');

Encore.configureRuntimeEnvironment('dev-server', {
    // command line options in camel-case format
    https: true,
    keepPublicPath: true
});

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

[Lyrkan]

That would be great, but we would have to make it so the WebpackConfig instance is only initialized if runtimeConfig is available (in order to get rid of the current checks) and prevent calls to the other methods of the public API if that's not the case.

I think proxying the whole public API could work and avoid having to add code to each method.
Maybe something like that:

let webpackConfig = null;

if (runtimeConfig) {
    webpackConfig = new WebpackConfig(runtimeConfig);
}

const publicApi = {
    configureRuntimeEnvironment: function(env, parameters) {
        runtimeConfig = parseRuntime(...);
        webpackConfig = new WebpackConfig(runtimeConfig);
        return this;
    },

    setOutputPath: function(outputPath) {
        // (...)
        return this;
    },

    setPublicPath: function(publicPath) {
        // (...)
        return this;
    },

    // (...)
};

const publicApiProxy = new Proxy(publicApi, {
    get: (target, prop) => {
        if (typeof target[prop] === 'function') {
            if (!webpackConfig && (prop !== 'configureRuntimeEnvironment')) {
                throw new Error('Not initialized yet ');
            } else {
                return (...parameters) => {
                    const res = target[prop](...parameters);
                    return (res === target) ? publicApiProxy : res;
                }
            }
        }
    }
});

module.exports = publicApiProxy;

It could also fix #55 since we would be able to try { ... } catch every calls.

I may give it a shot tonight if I find some spare time.