在同构应用程序上进行运行 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 加载 mocha 时

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

我遇到了一个错误

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

我试过：

但是也没用。

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

Answer 1

假设你正在使用 Webpack 进行测试，你可以使用 Sokra（Webpack 的创建者）的 null-loader，以确保所有 SCSS requires/imports 结果为 null，从而不会导致任何错误。

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

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

Answer 2

我找到了解决办法。 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'),
     }
  })
]

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

Cannot import SCSS file while running mocha test on isomorphic app

javascript

mocha.js

reactjs

webpack

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

Cannot import SCSS file while running mocha test on isomorphic app

javascript

mocha.js

reactjs

webpack

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