title: Mocha testing failed due to css in webpack
body: <p>I'm new to Mocha and I am trying to use it to test a simple React component. The test would pass if the react component doesn't have any CSS styling but throws a syntax error if the tag within the React component contains any className:</p>
  
  <p>Testing.react.js</p>
  
  <pre><code>import React from 'react';
  
  export default class Testing extends React.Component {
    render() {
      return (
        &lt;section&gt;
          &lt;form&gt;
            &lt;input type="text" /&gt;
          &lt;/form&gt;
        &lt;/section&gt;
      );
    }
  }
  </code></pre>
  
  <p>testing.jsx</p>
  
  <pre><code>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(
              &lt;TestingSample /&gt;
          );
  
          var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
              renderedComponent, 'input'
          );
  
          this.inputElement = inputComponent.getDOMNode();
      });
  
      it('&lt;input&gt; should be of type "text"', function () {
          assert(this.inputElement.getAttribute('type') === 'text');
      });
  })
  </code></pre>
  
  <p>The test would pass: </p>
  
  <pre><code>&gt; mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx
  
  
    TestSample component
      ✓ &lt;input&gt; should be of type "text"
  
  
    1 passing (44ms)
  </code></pre>
  
  <p>after I added the className inside of the input tag an error shows up: </p>
  
  <pre><code>import React from 'react';
  import testingStyle from '../../scss/components/landing/testing.scss';
  
  export default class Testing extends React.Component {
    render() {
      return (
        &lt;section&gt;
          &lt;form&gt;
            &lt;input type="text" className="testingStyle.color" placeholder="Where would you like to dine" /&gt;     
          &lt;/form&gt;
        &lt;/section&gt;
      );
    }
  }
  </code></pre>
  
  <p>Test result:</p>
  
  <pre><code>SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
  &gt; 1 | .color {
      | ^
    2 |   color: red;
    3 | }
  </code></pre>
  
  <p>I've searched online but no luck so far. Am I missing something? Please help me out or point me to the right direction would be greatly appreciated. 
  I'm currently using:<br>
  Node Express Server<br>
  React<br>
  React-router<br>
  Webpack<br>
  Babel<br>
  Mocha<br>
  Chai<br>
  Sinon<br>
  Sinon-Chai</p>