在同构应用程序上运行mocha测试时，无法导入SCSS文件

Question

我正在尝试测试一个react组件。

Foo.jsx

import * as React from 'react';
require('css/foo'); // foo.scss but using resolve in the webpack
...rest of code

Foo.spec.js（这只是一个测试锅炉的地方）

import * as React from 'react';
import * as TestUtils from 'react-addons-test-utils';
import Foo from '../src/js/Foo';
function setup() {
  const renderer = TestUtils.createRenderer();
  renderer.render(<Menu />);
  const output = renderer.getRenderOutput();
  return {
    props: props,
    output: output,
    renderer: renderer
  }
}
describe('Menu Component', () => {
  it('should render', () => {
    setup();
  })
});

tests.js

function noop() {
  return null;
}
require.extensions['.scss'] = noop;

尝试从CLI 加载摩卡时

./node_modules/.bin/mocha tests.js ./test/**/*.spec.js

我收到一个错误

Error: Cannot find module 'css/foo' ...

我尝试过：使用Mocha 测试时处理WebPack CSS导入

但它也不起作用。

如果我评论这一行，那么测试正在执行。

Answer 1

我找到了解决方案。https://github.com/darul75/web-react/blob/master/app/components/TodoSection/TodoItem.js#L13

当我在服务器上运行测试时：

APP_ENV=SERVER ./node_modules/.bin/mocha tests.js ./test/**/*.spec.js

在客户端上，我必须添加一个插件到webpack-config:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'APP_ENV': JSON.stringify('BROWSER'),
     }
  })
]

Answer 2

假设您使用Webpack进行测试，您可以使用Sokra（Webpack的创建者）的null加载器，以确保所有SCSS要求/导入都会导致null，从而不会导致任何错误。

 {test: /.scss?$/, loader: 'null'}

https://github.com/webpack/null-loader