57

React コンポーネントの開発にwebpackを使用しています。以下は、その単純なバージョンです。

'use strict';

require('./MyComponent.less');

var React = require('react');

var MyComponent = React.createClass({
  render() {
    return (
      <div className="my-component">
        Hello World
      </div>
    );
  }
});

module.exports = MyComponent;

ここで、 jestを使用してこのコンポーネントをテストしたいと思います。ここに私の関連するビットがありますpackage.json:

"scripts": {
  "test": "jest"
},
"jest": {
  "rootDir": ".",
  "testDirectoryName": "tests",
  "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
  "unmockedModulePathPatterns": [
    "react"
  ]
}

を実行するnpm testと、次のエラーが表示されます。

SyntaxError: /Users/mishamoroshko/react-component/src/tests/MyComponent.js: /Users/mishamoroshko/react-component/src/MyComponent.js: /Users/mishamoroshko/react-component/src/MyComponent.less: Unexpectedトークン ILLEGAL

require('./MyComponent.less')jest がテストを実行する前に、webpack を処理する必要があるようです。

jest-webpack のようなものを使用する必要があるのだろうか。はいの場合、複数scriptPreprocessorの を指定する方法はありますか? （私はすでに使用していることに注意してくださいbabel-jest）

4

12 に答える 12

25

必要なモジュールを無視するために私が見つけた最もクリーンな解決策は、moduleNameMapper構成を使用することです(最新バージョン0.9.2で動作します)

ドキュメントに従うのは難しいです。以下が役立つことを願っています。

packages.json 構成に moduleNameMapper キーを追加します。アイテムのキーは、必要な文字列の正規表現である必要があります。「.less」ファイルの例:

"moduleNameMapper": { "^.*[.](less|LESS)$": "EmptyModule" },

EmptyModule.js をルート フォルダーに追加します。

/**
 * @providesModule EmptyModule
 */
module.exports = '';

moduleNameMapper は EmptyModule をこのモジュールのエイリアスとして使用するため、コメントは重要です ( providesModule の詳細を参照してください)。

これで、正規表現に一致するそれぞれの require 参照が空の文字列に置き換えられます。

「js」ファイルで moduleFileExtensions 構成を使用する場合は、EmptyModule も「unmockedModulePathPatterns」に追加してください。

これが私が最終的に得たjest構成です：

"jest": {
  "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
  "moduleFileExtensions": ["js", "json","jsx" ],
  "moduleNameMapper": {
    "^.*[.](jpg|JPG|gif|GIF|png|PNG|less|LESS|css|CSS)$": "EmptyModule"
  },
  "preprocessorIgnorePatterns": [ "/node_modules/" ],
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react",
    "<rootDir>/node_modules/react-dom",
    "<rootDir>/node_modules/react-addons-test-utils",
    "<rootDir>/EmptyModule.js"
  ]
}
于 2016-03-21T17:22:29.503 に答える
19

私は次のハックで終わった：

// package.json

"jest": {
  "scriptPreprocessor": "<rootDir>/jest-script-preprocessor",
  ...
}


// jest-script-preprocessor.js
var babelJest = require("babel-jest");

module.exports = {
  process: function(src, filename) {
    return babelJest.process(src, filename)
      .replace(/^require.*\.less.*;$/gm, '');
  }
};

しかし、私はまだこの問題の正しい解決策は何だろうと思っています。

于 2015-03-05T09:22:32.143 に答える
10

moduleNameMapperJest の構成を使用するとさらに簡単であることがわかりました。

// package.json

"jest": {
    "moduleNameMapper": {
      "^.+\\.scss$": "<rootDir>/scripts/mocks/style-mock.js"
    }
}

// style-mock.js

module.exports = {};

詳細については、Jest のチュートリアル ページを参照してください。

于 2016-11-08T02:56:12.800 に答える
3

Jestドキュメントから：

// in terminal, add new dependency: identity-obj-proxy
npm install --save-dev identity-obj-proxy

// package.json (for CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}

上記のスニペットは、すべての.lessファイルを新しい依存関係identity-obj-proxyにルーティングします。これは、呼び出されたときにクラス名を含む文字列を返し'styleName'ますstyles.styleName。

于 2017-08-29T21:19:43.507 に答える
1

私はそのようなパターンで同様の問題を経験しました

import React, { PropTypes, Component } from 'react';
import styles from './ContactPage.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ContactPage extends Component {

https://github.com/kriasoft/react-starter-kit/blob/9204f2661ebee15dcb0b2feed4ae1d2137a8d213/src/components/ContactPage/ContactPage.js#L4-L7の例を参照してください。

Jest を実行するには、次の 2 つの問題があります。

  • の輸入.css
  • デコレータの適用@withStyles( TypeError: <...> (0 , _appDecoratorsWithStyles2.default)(...) is not a function)

最初の 1 つ.cssは、スクリプト プリプロセッサで自分自身をモックすることで解決されました。

2つ目は、自動モックからデコレータを除外することで解決されましたunmockedModulePathPatterns

module.exports = {
  process: function (src, filename) {

    ...

    if (filename.match(/\.css$/)) src = '';

    ...

    babel.transform(src, ...
  }
}

https://github.com/babel/babel-jest/blob/77a24a71ae2291af64f51a237b2a9146fa38b136/index.jsに基づく例

また、注意: jest プリプロセッサを使用する場合は、キャッシュを消去する必要があります。

$ rm node_modules/jest-cli/.haste_cache -r
于 2015-11-08T00:04:00.507 に答える