babel-plugin-import-noop

A babel plugin to turn certain types of import statements into noops that declare empty objects.

Why?

If you're using CSS Modules via a build tool like Webpack's css-loader, then when you build your app bundle webpack will magically transform imports like:

1import style from './some-style.scss';

— into JavaScript that injects this style into your pages.

However, if you want to run tests, you'll hit a syntax error if you try to run the JavaScript files as-is, since the CSS they're importing isn't valid JavaScript. You could compile an entire "test bundle" with webpack before running the tests, but that adds a substantial boot time to every run. Instead, you can use the babel require hook, and use this plugin to replace all instances of:

1import style from './some-style.scss';

with

1const style = {};

— during compilation.

Usage

1$ npm install --save-dev babel-plugin-import-noop

Then, in your .babelrc:

1{
2  "plugins": ["import-noop"]
3}

Or, to only load this plugin during tests (i.e. not in your actual bundle):

1{
2  "env": {
3    "test": {
4      "plugins": ["import-noop"]
5    }
6  }
7}

1NODE_ENV=test mocha ....

To specify a list of file extensions which should be transformed, you can add additional options to the plugin declaration:

1{
2  "plugins": [
3    ["import-noop", {
4      "extensions": ["scss", "css"]
5    }]
6  ]
7}

Limitations

Since the newly defined object won't have any properties, anything you're reading from it in your code (e.g. style.className) will resolve to undefined. A pull request to allow defining properties using the plugin configuration would be very useful!

License

MIT