10

Jest を使用して、CoffeeScript + React jsx で記述された React コンポーネントをテストするにはどうすればよいですか?

Jest で提供される唯一の CoffeeScript の例はプレーンな CoffeeScript を使用しており、CoffeeScript + React JSX では機能しません (a に達すると構文エラーになります<)。

私が試したこと

最初の試行: execSync

// preprocessor.js
var execSync = require('exec-sync');

module.exports = {
  process: function (src, path) {
    return execSync('browserify -t coffee-reactify ' + path);
  }
};

これは機能しますが、時間がかかりすぎます (ダミー テストでは 12 秒が適切です)。

それから私は試しました：

2 回目の試行: coffee-react-transform

// preprocessor.js
var coffee = require('coffee-script');
var transform = require('coffee-react-transform');

module.exports = {
  process: function(src, path) {
    if (path.match(/\.coffee$/)) {
      return coffee.compile(transform(src), {'bare': true});
    }
    return src;
  }
};

これにより、次のような奇妙なエラーがスローされます。

TypeError: function() {...} にはメソッド「getPooled」がありません

「メソッド 'getPooled' がありません」に対する唯一の Google の結果は、この gistです。これは、私が取得したエラーを正確に示していますが、他の洞察は提供していません。

3 回目の試み

私はcoffee-reactifyを使用できると思いますが、非同期のストリームを返しますが、process関数preprocess.jsは同期的に使用され、これまでのところ、ストリームを同期的に読み取る方法は見つかりませんでした。

私に何ができる？

4

3 に答える 3

8

jestpackage.jsonのプロパティで「unmockedModulePathPatterns」に反応を追加しなかったことを除いて（ここでは推測しています）、2番目のアプローチは正しかったと思います。これは通常、getPooled私の経験上のエラーの結果です。

以下は私にとってはうまくいきます：

パッケージ.json

  // ...
  "jest": {
    "unmockedModulePathPatterns": ["<rootDir>/node_modules/react"],
    "testFileExtensions": [
      "js",
      "coffee"
    ],
    "scriptPreprocessor": "<rootDir>/preprocessor.js"
  }

preprocessor.js

// I found it simpler to use coffee-react,
// since it does the jsx transform and coffeescript compilation 
var coffee = require('coffee-react');

module.exports = {
  process: function(src, path) {
    if (path.match(/\.coffee$/)) {
      return coffee.compile(src, {bare: true});
    }
    return src;
  }
};

jsx -> coffee -> js -> jestエラーはパイプラインのどこかで発生し、黙って飲み込まれる可能性があるため、このプロセス全体のトラブルシューティングは困難です。jsx -> coffeeこれをトラブルシューティングするには、変換を別のファイルで実行して、およびcoffee -> jsが正しく行われたことを確認してから、jest プリプロセッサを実行するのが最も役立つことがわかりました。

于 2014-11-26T17:43:12.507 に答える
1

user2534631 のテンプレート プロジェクトに基づいて、coffee-react-transformを使用して CJSX ファイルをコンパイルするように拡張しました。

https://github.com/redice/jest-react-coffeescript

var coffee = require('coffee-script');
var transform = require('coffee-react-transform');

module.exports = {
  process: function(src, path) {
    if (coffee.helpers.isCoffee(path)) {
      compiled_cjx = transform(src);
      compiled_to_react = coffee.compile(compiled_cjx, {bare: true});

      return compiled_to_react;
    }

    return src;
  }
};

そのため、CJSX 構文を使用して React コンポーネントを記述します。

render: ->
  <label>
    <input
      type="checkbox"
      checked={this.state.isChecked}
      onChange={this.onChange} />
    {if this.state.isChecked then this.props.labelOn else this.props.labelOff}
  </label>
于 2015-10-05T10:49:59.657 に答える