webpack の css が原因で Mocha のテストに失敗する

質問

私はMochaの初心者で、簡単なReactコンポーネントをテストするためにそれを使用しようとしています。テストは、リアクトコンポーネントにCSSスタイリングがない場合は合格しますが、Reactコンポーネント内のタグが任意のclassNameを含む場合は構文エラーをスローします。

テスト.react.js

import React from 'react';

export default class Testing extends React.Component {
  render() {
    return (
      <section>
        <form>
          <input type="text" />
        </form>
      </section>
    );
  }
}

testing.jsx

import {
  React,
  sinon,
  assert,
  expect,
  TestUtils
} from '../../test_helper';

import TestingSample from '../../../app/components/Testing.react.js';

describe('TestingSample component', function(){
    before('render and locate element', function(){
        var renderedComponent = TestUtils.renderIntoDocument(
            <TestingSample />
        );

        var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
            renderedComponent, 'input'
        );

        this.inputElement = inputComponent.getDOMNode();
    });

    it('<input> should be of type "text"', function () {
        assert(this.inputElement.getAttribute('type') === 'text');
    });
})

テストは合格でしょう。

> mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx


  TestSample component
    ✓ <input> should be of type "text"


  1 passing (44ms)

を入力した後、エラーが表示されます。

import React from 'react';
import testingStyle from '../../scss/components/landing/testing.scss';

export default class Testing extends React.Component {
  render() {
    return (
      <section>
        <form>
          <input type="text" className="testingStyle.color" placeholder="Where would you like to dine" />     
        </form>
      </section>
    );
  }
}

テスト結果です。

SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
> 1 | .color {
    | ^
  2 |   color: red;
  3 | }

ネットで検索してみましたが、今のところ見つかりません。私は何かを見逃しているのでしょうか？どうか私を助けてください、または正しい方向を示していただけると大変ありがたいです。 現在使用しているのは

Node Expressサーバー

リアクト

リアクトルーター

ウェブパック

バベル

モカ

チャイ

シノン

シノンチャイ

どのように解決するのですか？

あるのは babel/register スタイルフックがあり、スタイルのインポートを無視します。

https://www.npmjs.com/package/ignore-styles

インストールします。

npm install --save-dev ignore-styles

スタイルなしでテストを実行します。

mocha --require ignore-styles