insin / nwb

A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
Other
5.57k stars 331 forks source link

How to specify 3rd party preprocessors for karma in web-module build's config? #408

Closed 4d4mm closed 6 years ago

4d4mm commented 6 years ago

I was trying to configure nwb with karma-html2js-preprocessor with the following configuration:

module.exports = {
  type: 'web-module',
  npm: {
    esModules: true,
    umd: false
  },
  karma: {
    preprocessors: {
      'tests/data/**/*.html': ['html2js']
    },
    testFiles: [
      'tests/data/**/*.html'
    ],
    html2JsPreprocessor: {
      stripPrefix: 'tests/data/',
      processPath: function(filePath) {
        return filePath.replace(/\.html$/, '');
      }
    }
  }
}

Seemingly, the both the preprocessors and the html2JsPreprocessor are completely ignored. As I can see, the getKarmaPluginConfig() has only hardwired preprocessors config:

var preprocessors = {};

  if (userKarma.testContext) {
    files.push(userKarma.testContext);
    preprocessors[userKarma.testContext] = ['webpack', 'sourcemap'];
  } else {
    testFiles.forEach(function (testGlob) {
      files.push(testGlob);
      preprocessors[testGlob] = ['webpack', 'sourcemap'];
    });
  }

I understand that nwb karma config is not the same as the raw karma config because it's being transformed. Do you guys have a workaround for this? Am I missing something? Is there any way to configure nwb karma with 3rd party pre-processors?

4d4mm commented 6 years ago

In case anybody having the same issue, I ended up using the webpack html-loader plugin and import the required files as a string.

module.exports = {
  type: 'web-module',
  npm: {
    esModules: true,
    umd: false
  },
  webpack: {
    extra: {
      module: {
        rules: [{
          test: /\.html$/,
          exclude: /node_modules/,
          use: {loader: 'html-loader'}
        }]
      }
    }
  }
}

And instead of refferring the contents from

window.__html__['expected.html']

simply used

import expectedHTML from './expected.html';

This solves the problem for the original example above. Also, it seems to be a much more elegant solution. But still, it would be great if we could add 3rd party karma preprocessors to the nwb config.

insin commented 6 years ago

You can use karma.extra to add any arbitrary extra stuff to be merged into the generated config.

I should also add the same config function escape hatch that's available for Webpack config for Karma config, which would allow you to edit the generated config programmatically.

4d4mm commented 6 years ago

Thanks. I failed to spot thekarma.extra.