Jest: RequireJSのサポート

++

Jestのモジュールシステムアドオン（require.js、es6モジュールなど）をサポートすることはロードマップにありますが、残念ながらまだ完全にはありません。

ただし、この問題の進捗状況を追跡するために、この問題を開いたままにしておきましょう。require.jsローダーをサポートすることは非常に便利だと思います。

@jeffmoのWebPACKはcommonjs / ES6 / AMDをサポートしています。 プラグインとしてjestを取り込むことができれば、それらすべてを無料で入手できる可能性があります。

++

大規模な組織で多くのプロジェクトがあり、jestの使用を計画していますが、100％requirejsです。 requirejs統合に関するetaはありますか？

++

jestも試してみたいのですが、現在取り組んでいるプロジェクトはRequireJSを使用しています。

：+1：

誰かがこれをシムとして使うことを提案しました、誰かがそれを試しましたか？

https://github.com/Jakobo/redefine

_警告付きで実行可能_。 私は、一時的なギャップとしてトリックを行うことができるいくつかのランダムなリポジトリにnodefyを使用して小さなビルドを実装しました。 パッケージの下のscripts.cjsを参照してください。

リトマス試験：AMDモジュールエイリアスは、node_modulesの下の対応するモジュールと整列します。 リトマス試験が失敗したが、あなたが必死である場合は、純粋なAMDモジュールをノード化するか、node_modulesにシンボリックリンクを追加することができますが、その考えは私を悲しませます。 私の見解では、私が使用する外観は、UMDを実装し、AMDエイリアスに合わせた名前にnpmでインストールする傾向があります。大したことではありません。

（nodefyの前にuRequireをチェックアウトしましたが、 CommonJSテンプレートはそれをnodefyと機能的に同等にします-ターゲットツールを使用します。amdefineもチェックアウトしましたが、jestは「require」で正規表現マッチングを使用します-おそらく匿名のAMDがあります角度はありますか？UMDは常に存在しますが、 document参照が散在しているUMDをコーディングすることは、マナーが悪いように聞こえます。）

+1

++

すべての新しいクライアント側コードでreact、backbone、requirejsを使用しています。 私は冗談を使って、反応をテストすることの苦痛のいくつかを和らげることができることを望んでいます。 物事をユニットレベルに下げるといいでしょう。 現在、reactコードのテストは、rspecとwebdriverを使用して行われています。 これは機能しますが、明らかな理由から理想的とは言えません。

実用的な回避策はまだありますか？ 私が遭遇している主な問題は、reactコンポーネントをラップするdefineステートメントです。

+1

@petehunt私をWebpackに切り替えたので、これも検討する必要があります。

+1

誰かがコードカバレッジでブラウザテストを実行しているjasmine / webpackまたはjest / webpackの例を教えてもらえますか？

++

requirejsのサポートはいつ期待できますか？

+1

+1

+1

+1

+1

+1

定義呼び出しにreturnの代わりにmodule.exportsを使用する場合は、これをプリプロセッサーに追加できます。

私のために働く：thumbsup：

// preprocessor.js
var ReactTools = require('react-tools');
module.exports = {
  process: function(src) {
    if (/define\(.*?\{/.test(src)) {
      //Remove AMD ceremony for use without require.js or almond.js
      src = src.replace(/define\(.*?\{/, '')
        .replace(/(}\);|}\))$/,'');
    }

    return ReactTools.transform(src);
  }
};

++

+1

+1

RequireJSサポートの+1

+1

@charliedowlerこのアプローチをもう少し説明して

if (typeof(module) == 'object' && module.exports) { module.exports = <my_element>;  }

それでも、私はreturnを使用しているので、プリプロセッサからパーサーエラーが発生します。 最後のリターンにも一致するように正規表現を拡張することで、逃げることができると思いました。 しかし、それはまったく機能していないようです。 「不正なreturnステートメント」エラーが発生し続けます。 おそらく表現に何か問題があり、それを捉えていません。

if (/define\(.*?\{/.test(src)) {
  src = src.replace(/(define\(.*?\{|return.*[\s]}\);?$)/g,'');  
}

stdoutにsrcを書き込む方法はありますか？ 単純なconsole.logが機能していません。

そして最後に、私がこれをすべて機能させると仮定します。 依存関係をどのように処理していますか？ たとえばReactのように？

+1

ああ！ 私は遊んでいました（そして冗談をとても楽しんでいました）。 今日それを実際のプロジェクトに引き込もうとしましたが、requireJSサポートがないことがわかりました：sob：...現在のすべての「実際の」プロジェクトの取引ブレーカー。 本当に悲しい。 確かにエキサイティングなアイデアでした！

：+1：

+1

+1

：+1：

：いいぞ：

：+1：

：+1：

そこで、webpackを使用してAMDモジュールとテストを一緒にコンパイルすることでこれを解決しました。 これにより、テストであらゆる種類の追加ローダーを使用することもできました。 https://github.com/ninjapanzer/Backbone-Flux-React-Webpack

：+1：

+1

+1

+1

この問題を報告していただきありがとうございます。ご理解のほどよろしくお願いいたします。 この問題に関する最新情報をコアチームに通知しました。 30日以内に回答をお待ちしております。そうでない場合は、問題が解決する可能性があります。

+1

@ facebook-github-bot-4やってください！

+1

+1

++

私は、WebpackをサポートするためにJestの「HasteModuleLoader」の代わりとなるJestpackに取り組んできました。 その結果、AMDを含むWebpackがサポートする任意のモジュールシステムを使用できることを意味します。

ちなみに、Jestpackのパフォーマンスをテストするのに本当に役立つので、FBスタイルの速攻モジュールを使用するプロジェクト以外のJestを使用する大規模な（っぽい）オープンソースプロジェクトを知っている人はいますか？

私はまたに取り組んでいますjest-requirejsプロジェクトに分析し、標準的な冗談プリプロセッサでより多くの試みのであるmain.js後、設定ファイルを実行deamdify削除され、 defineラッパーは、main.jsの指定されたbaseUrlとパスの詳細に基づいてrequireパスを書き換え、変換されたファイルを通常どおりjestに渡します。

プラグイン/ローダーの構文に引き続き取り組んでおり、テスト環境内でjest.dontMock("") 、 jest.setMock("") 、およびrequire.requireActual("")パスを書き換えています。

やあみんなこれは本当に素晴らしいです。 私はJestpackのアイデアが好きで、追加のモジュールリゾルバーのサポートをはるかに簡単にすることを意味してきました。 最後に、Webサイトを刷新し、Getting Startedガイドの一部としてJestpackのようなソリューションを推奨したいと思います（頭の中にあります:)）。 @richardscarrottと@sterpeが必要な場合は、

また、cc @ mwolsonと@ColCh

（他のすべての人へ：コメントの賛成をやめてください。役に立たないです。冗談のために何かを構築したい場合は、プルリクエストを送信してください。コードが議論に勝ちます！個人的には、コミュニティの人々が機能を必要としているという理由だけで機能に優先順位を付けることはできません。自分で出回っている_すべてのモジュールローダー_を使用しないでください。）

Jestpackは興味深いものですが、テストごとに1つのエントリポイントを作成する必要はありません。 https://github.com/Ticketmaster/jest-webpack-aliasは、いくつかの前処理と、webpackのモジュール解決コードの再実装による未発見のバグの可能性を犠牲にして、問題をもう少し一般的に解決します。

また、入門ガイドでは、プリプロセッサが実行されるファイルを制限することをお勧めします。そうしないと、テストの実行が大幅に遅くなります。

プリプロセッサは1回だけ実行され、キャッシュキー機能を提供できます。 ファイルが変更されていない場合、jestはプリプロセッサを再実行しません。

それはそうかもしれませんが、最初の実行でさえ、テストスイートの実行に約10秒を追加するのに十分でした。

それは速くないことに同意した。 FBでは、最初の実行は後続の実行のほぼ2倍の時間がかかりますが、個人的にはこれを解決する他の方法はありません。FBではbabelやその他のカスタム変換を使用しています。 プリプロセッサなしではテストを実行できません:)

requirejsプリプロセッサの開発中に、プリプロセッサのキャッシュが私を悩ませていました。 私はまだほとんどの場合、キャッシュがないと信じている[email protected]を使用していますか？

0.5で問題なく動作するはずです！

Webpackはdev-watchモードで非常に高速です。

なぜなら：

1. Webpackはランタイムをメモリに保持します（リロードなし）
2. コンパイルされたソースコードもメモリにあります。

したがって、私のJestプリプロセッサでは、（2）ポイントのみを実装しました。

要するに、JestとWebpackの上のパッケージ（ メモリFSでコンパイルし、テストケースをメモリFSで実行するだけです。

それが私の見解です...

しかし、今は別の問題があります。今のところ、メモリFSをJestに注入することはできません。

コンパイルされたソースをキャッシュに直接挿入するために、プライベートJestキャッシュAPIを使用することを考えました。 それはハックかもしれないので、私はここで間違っていました： jest-webpack / issues / 4＃issuecomment-98623189

ああ、プリプロセッサとしてWebpackを使用したKarmaの動作も非常に遅いことをお伝えして

@cpojerすでにオプションが設定されているので、最終的にモジュールローダーを構成可能にすることがあなたの意図だと思ったので、Jestpackを使って突き刺すと思いました。 私が遭遇した唯一の本当の問題は、node_modules https://github.com/facebook/jest/issues/509の手動モックを検出するためのロジックを理解することでした

@mwolson Jestpackがテストファイルごとに個別のエントリポイントを使用する理由は、Jestのマルチプロセスを引き続き利用できるようにするためです。

moduleLoaderは、実際には、構成の一部としてすでに指定できます。

++

これもお願いします。 Jestはすばらしいソフトウェアのように見えますが、RequireJSのサポートがないために必要なすべてを書き直すことはできません。

+1

コミュニティの誰かがこれに取り組むことに興味がありますか？ これを通じて人々をサポートし、公式のJestプラグインを作成できれば幸いです。 近いうちにFBでこれに多額の投資をする可能性は低いです。 Jestチームは非常に小さく（1.5人）、残念ながらこれらすべての機能に取り組むことはできません。

JavaScriptコミュニティと標準の現在の状態に基づくと、js自体がJavaScriptコードを作成するための大きな未来を持っている必要はないようです。 ES2015には標準化されたモジュールシステムがあります。 BabelとJestは完全に統合され、連携して機能します。 CommonJSまたはES2015モジュールに切り替えることをお勧めします。これにより、すぐに使用できるツールが増えます。

JSはまた、ここでは生産が展開するために使用することができるrequire.jsにCommonJSを変換する方法についての文書を持っている必要が、以下を参照してください。 http://requirejs.org/docs/commonjs.html

個人的には、requireJSを使用してコードを記述してもメリットはありません。 また、必要なJSコードベースをCommonJSに変換するのに役立つcodemodの作成も喜んでお手伝いします。 もう1つの課題は、requireJSをCommonJS babelプラグインに記述し、それをJestのプリプロセッサーに取り込むことです。

@cpojer https://github.com/sterpe/jest-requirejs/blob/master/index.jsのプリプロセッサアプローチである程度成功しましたが、これまでのところ、！text /プラグインの変換のみを実装していました。 私たちのチームはrequirejsから完全に離れたので、私はその道を続ける理由がありませんでした。

私は同意します。コードのオーサリングにRequireJSを使用することにはほとんど価値がありません。 CommonJS / ES2015モジュールコードを本番用にrequirejsにコンパイルすることは私には理にかなっていますが、このスタイルのコードを手動で作成するのはあまり良いことではないようです。

RequireJSからwebpackに移行しました。 コードベースには300を超えるコンポーネントがあります。 全体のプロセスは驚くほど簡単で痛みもありませんでした。

私が使用したツールは、コードをAMDからCommonJSスタイルに変換するためのhttps://github.com/Skookum/recast-to-cjsでした。

また、 https：//github.com/facebook/jscodeshiftの助けを借りて、数日以内にコードベースをReact0.11から0.14に移行しました。

これが同じ状況の誰かを助けるかもしれないことを願っています。

@tendantいいね！ それはまさに私が前に話していたことです:)それがあなたのためにとてもうまくいったことをうれしく思います。

これが私の回避策です：
https://github.com/1twitif/testRequireJSAmdModulesWithJest
少なくともこのユースケースでは機能します：
http://stackoverflow.com/questions/33889662/not-able-to-load-amd-modules-through-jest

これは閉鎖されているので、それはFacebookがこれのサポートを追加しないことを意味しますか？

Facebookが私を意味するのであれば、そうです、「公式の」サポートがある可能性は低いです。 それはあなたがJestに貢献してこの機能を取り入れることを妨げるものではありませんが、最近はほとんどの人がESモジュールまたはCommonJSに移行していると思います。

ええ、私は知っています。 残念ながら、これらの依存関係は仕事のためのものであるため、これらの依存関係から離れることはできません。

babel-plugin-transform-amd-to-commonjsは、特にすでにbabel-jestのようなものを使用している場合に、Jest + AMDの問題を解決するのに役立ちます。

テスト環境で変換を実行することにより、JestにAMDファイルを透過的に要求させる方法を示すサンプルプロジェクトを設定しました。

実際のプロジェクトでのこのようなアプローチの詳細はわかりません。特に、Jest / RequireJS / Webpack / etc間で構成を共有するための優れたアプローチです。 .js構成ファイルのJestサポートは、より再利用可能なソリューションに向けた一歩となるでしょう（https://github.com/facebook/jest/issues/2140を参照）。

@msroseこれは素晴らしいです。 これを共有していただきありがとうございます。

これは古い問題だと理解しています。 単純な変換が機能する可能性があります。

exports.process = function (content) {
  return 'function define(name, deps, body) { module.exports = body.apply(undefined, deps.map(require)); }' + content;
}

AMD-> CJSの変換は、複数の方法で実行できると思います。たとえば、 deamdify 、インジェクトされたラッパーなどです。問題はまだ解決されていませんが、Requireスタイルのローダー/プラグイン構文です。 これは、 fooTemplate = require('tpl!foo.tpl')やbarJson = require('json!bar.json') （比較的一般的なものとして）のようなものです。 しかし、これらはかなり多く、実際のrequire-jsプロジェクトにはこの種の構文が散らばっています。

最終的にjest |のモジュールローダーにフィードする変換システムで既存のrequire-jsプラグインを直接再利用する簡単な方法があれば素晴らしいと思います。

+1

ReferenceError: define is not defined

+1

失敗srcApp.test.js
●テストスイートの実行に失敗しました

ReferenceError: define is not defined

amdの代わりにumdを使用する必要があります。 それが不可能な場合は、トランスフォームを追加する必要があります（たとえば、上記のリンクされたbabelプラグイン）。

loader!構文に関しては、サポートしません（Webpackでもサポートしません）。 回避策は、インポートを変換（ローダーを削除）し、Jestにtransformを使用して変換させることです。 関連する議論：＃4868