Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
4d4mm opened this issue Dec 2, 2017 · 3 comments
Closed

Comments

@4d4mm
Copy link

4d4mm commented Dec 2, 2017

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
Copy link
Author

4d4mm commented Dec 2, 2017

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
Copy link
Owner

insin commented Dec 2, 2017

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
Copy link
Author

4d4mm commented Dec 2, 2017

Thanks. I failed to spot thekarma.extra.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants