☰

webpackのCSSが原因でMochaテストが失敗しました 質問する

tag-icon • tag-icon unit-testing reactjs mocha.js webpack webpack-dev-server
webpackのCSSが原因でMochaテストが失敗しました 質問する

私は Mocha を初めて使用しており、シンプルな React コンポーネントをテストするために使用しようとしています。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>
    );
  }
}

テスト.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)

入力タグ内に className を追加した後、エラーが表示されます。

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 Server
React
React-router
Webpack
Babel
Mocha
Chai
Sinon
Sinon-Chai

ベストアンサー1

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

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

インストール:

npm install --save-dev ignore-styles

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

mocha --require ignore-styles

おすすめ記事