web-dev-qa-db-ja.com

WebpackのCSSが原因でMochaテストが失敗しました

私はMochaを初めて使用し、単純なReact=コンポーネントをテストするためにそれを使用しようとしています。 Reactコンポーネント内のタグには、任意のclassNameが含まれます。

Testing.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)

入力タグ内に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サーバー
反応
React-router
Webpack
バベル
モカ
チャイ
シノン
シノンチャイ

unit-testingreactjsmochawebpackwebpack-dev-server
70
Yi Ren

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

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

インストールしてください：

npm install --save-dev ignore-styles

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

mocha --require ignore-styles

144
rzueger

次のようにmochaを実行するcssコンパイラー、コンパイラーjsを使用できます。

css-dnt-compiler.js

function donothing() {
  return null;
}

require.extensions['.css'] = donothing;
require.extensions['.less'] = donothing;
require.extensions['.scss'] = donothing;
// ..etc

そして、次のようにmochaコマンドを実行します。

mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive
12
zhaozhiming

ここと同じ答え 、これは私がBabel 6で作業するために使用したものです

package.json

"scripts": {
  "test": "mocha --compilers js:babel-core/register 
          --require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'",

tools/testHelper.js

// Prevent mocha from interpreting CSS @import files
function noop() {
  return null;
}

require.extensions['.css'] = noop;

これにより、コンポーネントと一緒にsrcフォルダー内にテストを置くことができます。 require.extensionsを使用して、必要な数の拡張機能を追加できます。

8
mummybot

Webpackを使用しているため、webpackがコンポーネントで必要なCSS/LESS/SASS/etcファイルを検出したときに、 null-loader を使用してnullをロードします。 npmを介してインストールしてから、webpack構成を更新してローダーを組み込みます。

{
    test: /(\.css|\.less|.\scss)$/,
    loader: 'null-loader'
}

明らかにこれにより、実際のアプリケーションでCSSをロードできなくなるため、このローダーを使用するテストバンドル用に別のwebpack構成を用意する必要があります。

4
Jim Skerritt

jestでこれを処理する方法を探している人のために-スタイルファイルのハンドラを追加するだけです：

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

// __mocks__/styleMock.js
module.exports = {};

もっと こちら 。

1
Piotr Jaworski

Mocha-webpackを使用しているため、これらのソリューションはどれも役に立たず、「-compilers」スイッチを受け入れません。最も人気のある回答で説明されているように、ignore-stylesパッケージを実装しましたが、イスタンブルのカバレッジレポートに違いはありませんでした（.lessファイルはまだテスト中）。

問題は、webpack.config.test.jsファイルで使用していた.lessローダーです。 less-loaderを null-loader と交換するだけで問題が解決しました。

module: {
    rules: [
        {
            test: /\.less$/,
            use: ['null-loader']
        }
    ]
}

私にとってこれは最も単純なソリューションであり、package.jsonスクリプトを変更/追加する必要はなく、さらに悪いことに新しい.jsファイルを追加するのではなく、テスト構成を直接ターゲットにします。

1
Artif3x

1つの簡単な方法は、「無視スタイル」をインポートすることです。テストクラスで..

0
Neelendu Shekhar

非常に古いですが、この質問はまだ関連性があるため、別の解決策を紹介します。

pirates 、フックをrequire()に追加するパッケージを使用します-Babelを使用している場合は、すでに持っています。

サンプルコード：

// .test-init.js
const { addHook } = require('pirates');

const IGNORE_EXTENSIONS = ['.scss', '.svg', '.css'];

addHook((code, filename) => '', { exts: IGNORE_EXTENSIONS });

この方法で、次のようにmochaを呼び出すことができます：mocha --require .test-init.js [whatever other parameters you use]

これは簡単でエレガントで、ignore-stylesとは異なり、スタイルのみを無視していることを意味するものではありません。また、モジュール全体をモックするなど、テストにさらにトリックを適用する必要がある場合、これは簡単に拡張できます。

0
AlQafir

以下のコードは、依存関係なしで機能します。テストの先頭に追加するだけです。

var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function () {
    if (arguments[0] && arguments[0].endsWith(".css"))
        return;
    return originalRequire.apply(this, arguments);
};
0
bert