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'],
  },
};

现在，我对Mocha进行了这样的测试：

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

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

当Mocha导入组件时，它还会尝试加载CSS组件。这有两个问题：

css目录已被别名化。摩卡需要知道别名的位置。要解决此问题，我已安装了babel-plugin-webpack-alias包，其中包含以下.babelrc：

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

Mocha无法导入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造成的损害;如果从未使用该包，则可能不需要每次运行。）

Webpack SASS加载器，别名不在Mocha下编译

1 个答案: