Webpack SASS loader with alias not compiling under Mocha - sass

Question

I have a component that loads styles like this. The css directory is somewhere else; here it is being used as a Webpack alias.
import 'css/components/PromptText';
// ...
class PromptText extends React.Component {
// ...
}
Here is my webpack.config.json:
var path = require('path');
module.exports = {
entry: './src/index.jsx',
output: {
path: 'dist',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
}, {
test: /\.json/,
exclude: /node_modules/,
loader: 'json',
}, {
test: /\.scss/,
exclude: /node_modules/,
loaders: ['style', 'css', 'sass'],
}],
},
resolve: {
alias: {
css: 'css', // <-- Alias here
},
root: path.resolve(__dirname),
extensions: ['', '.js', '.jsx', '.scss'],
},
};
Now, I have a test like this for Mocha:
import PromptText from '../../src/components/PromptText';
describe('PromptText', () => {
it('should display words');
});
When Mocha imports the component, it also tries to load the CSS component. There are two problems with this:
The css directory has been aliased. Mocha needs to know where the alias points. To fix this, I have installed the babel-plugin-webpack-alias package, with the following .babelrc:
{
"presets": ["es2017", "react", "stage-0"],
"env": {
"test": {
"plugins": [
["webpack-alias", {"config": "webpack.config.js"}]
]
}
}
}
CSS can't be imported by Mocha, so it needs to be ignored. I use the ignore-styles package and invoke Mocha as mocha --compilers js:babel-core/register --require ignore-styles.
Despite having done these two things, I get the following error when trying to run tests:
(cd data && make)
make[1]: Nothing to be done for `all'.
NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register --require ignore-styles \
$(find test -type f -name 'test*.js')
module.js:341
throw err;
^
Error: Cannot find module 'css'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/waleed/Workspace/js/steno/src/components/PromptText.jsx:2:1)
at Module._compile (module.js:413:34)
at loader (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:146:5)
at Object.require.extensions.(anonymous function) [as .jsx] (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:156:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/waleed/Workspace/js/steno/test/components/testPromptText.js:2:1)
at Module._compile (module.js:413:34)
at loader (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:146:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:156:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:20:19)
at /Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:220:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:217:14)
at Mocha.run (/Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:485:10)
at Object.<anonymous> (/Users/waleed/Workspace/js/steno/node_modules/mocha/bin/_mocha:403:18)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:148:18)
at node.js:405:3
make: *** [test] Error 1
For some reason, the css alias isn't being resolved. However, this error only happens sometimes, unpredictably. In order to consistently recreate this error, I have to set BABEL_DISABLE_CACHE=1 in the environment.
How can I get my Mocha test to correctly import and ignore the CSS file?

Answer 1

In order to fix this, I switched from the babel-plugin-webpack-alias to the babel-plugin-webpack-aliases package, and update my .babelrc to use it:
{
"presets": ["es2017", "react", "stage-0"],
"env": {
"test": {
"plugins": [
["webpack-aliases", {"config": "webpack.config.js"}]
]
}
}
}
I also always run mocha with BABEL_DISABLE_CACHE=1 set in the environment. (I think this is undoing the damage that babel-plugin-webpack-alias did; it may not be necessary on every run if that package was never used.)