Загрузитель WebPack SASS с псевдонимом не компилируется под Mocha

Question

У меня есть компонент, который загружает такие стили. Каталог css находится где-то в другом месте; здесь он используется как псевдоним Webpack.

import 'css/components/PromptText'; 
// ... 
class PromptText extends React.Component { 
    // ... 
} 

Вот мой 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'], 
    }, 
}; 

---

Теперь у меня есть тест, как это для мокко:

import PromptText from '../../src/components/PromptText'; 

describe('PromptText',() => { 
    it('should display words'); 
}); 

Когда Мокко импортирует компонент, он также пытается загрузите компонент CSS. Есть две проблемы:

1. Каталог css был псевдонимами. Мокко нужно знать, где находятся псевдонимы. Чтобы это исправить, я установил babel-plugin-webpack-alias пакет, со следующим .babelrc:

   { 
       "presets": ["es2017", "react", "stage-0"], 
       "env": { 
       "test": { 
        "plugins": [ 
        ["webpack-alias", {"config": "webpack.config.js"}] 
        ] 
       } 
       } 
   } 
   

2. CSS не может быть импортирован Мокко, поэтому он должен быть проигнорирован. Я использую пакет ignore-styles и вызываю Mocha как mocha --compilers js:babel-core/register --require ignore-styles.

Несмотря на то, сделал эти две вещи, я получаю следующее сообщение об ошибке при попытке запуска тестов:

(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 

По какой-то причине css псевдоним не решен. Однако эта ошибка возникает иногда, непредсказуемо. Чтобы последовательно воссоздать эту ошибку, я должен установить BABEL_DISABLE_CACHE=1 в среде.

Как я могу проверить, что мой тест Mocha правильно импортирует и игнорирует файл CSS?

Answer 1

Для того, чтобы исправить это, я перешел от babel-plugin-webpack-alias к babel-plugin-webpack-aliases пакета и обновлять мой .babelrc использовать:

{ 
    "presets": ["es2017", "react", "stage-0"], 
    "env": { 
    "test": { 
     "plugins": [ 
     ["webpack-aliases", {"config": "webpack.config.js"}] 
     ] 
    } 
    } 
} 

Я также всегда работать mocha с BABEL_DISABLE_CACHE=1 набор в окружающей среде. (Я думаю, что это уничтожает ущерб, который был нанесен babel-plugin-webpack-alias, но может быть не нужно на каждом прогоне, если этот пакет никогда не использовался.)