javascript - 在同构应用程序上运行 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();
  })
});

测试.js

function noop() {
  return null;
}

require.extensions['.scss'] = noop;

尝试从 CLI 加载 Mocha 时

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

我收到一个错误

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

我尝试过: Handle WebPack CSS imports when testing with Mocha

但它也不起作用。

如果我注释掉该行，则测试正在执行。

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 配置添加一个插件:

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