Question

我试图测试反应成分。

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' ...

我试过了： 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'),
     }
  })
]

Answer 2

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

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

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

在isomorphic app上运行mocha测试时无法导入SCSS文件

2 个答案: