問題タブ [react-native-testing-library]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
typescript - TypeScript を使用して React Native monorepo で jest ユニットおよびコンポーネント テストを適切に構成する方法
私たちのリポジトリ (作業中なので、残念ながらリンクを提供することはできません) はかなり大きくて複雑なので、私の問題を説明するのは少し難しいですが、最善を尽くします。まず第一に、問題:
問題
実行するjest
と、結果は次のようになります。
エラー メッセージは、モノレポ内から (@packages/
エイリアス経由で) 何かをインポートするファイルのすべてのテストで同じです。IconWithBadge
明らかにMetrics
モジュールをインポートできないまったく同じコンポーネントです。現在のすべてのテスト スイートの完全な出力については、以下を参照してください。
ここで注意すべき重要な点は次のとおりです。
React Native コンテキストでは、このコードはすべて問題なく動作します。
つまり、通常どおり、コマンドを使用してアプリをビルドおよび実行するとreact-native
、すべてが機能し、エラーは発生しません。jest
このエラーが発生するのは、テストのコンテキストだけです。
Metrics
また、 fromのすべてのインスタンスを削除して、再度IconWithBadge
実行するとjest
します。Metrics
次に、奇跡的にある場所にインポートする別のファイルを見つけますundefined
。
ここで、リポジトリの構造と構成の概要を説明するために、環境を見てみましょう。
環境
次のような構造の monorepo があります。
コンポーネント テスト ( jest-nativeおよびRN Testing Libraryを使用) と、リポジトリ内の単純な単体テストの両方があります。detox
ディレクトリの存在から推測できるように、テストもありますがe2e
、現時点では重要ではありません。
すべてのコード (テスト コードとアプリ コード) は TypeScript で記述され、React Native 部分については、RN チームが推奨するようにすべて Babel 経由でコンパイルされます。ただし、テストのために、コードを CommonJS にコンパイルするようにts-jestjest
を構成しました。TypeScript コードをコンパイルし、すべての JavaScript コードttypescript
で使用するように特別に構成されています。babel-jest
すべてがどのように構成されているかを示すために、最も重要な構成をここに貼り付けます。
設定
Jest設定
Expo の unimodulesを使用するためjest-expo
、Expo 側の jest-testing を適切にセットアップするインストールも行いました。これts-jest
を念頭に置いて、私たちjest.config.js
は次のようになります。
バベルの設定
./get-babel-config.js
./app-directory/babel.config.js
./babel.config.js
TypeScript 構成
./tsconfig.json
./tsconfig.spec.json
パッケージJSON
./package.json
./app-directory/package.json
概要
これは、すべての関連情報である必要があります。何か不足している場合や追加情報が必要な場合は、お知らせください。質問を要約するには:
jest
通常の開発/生産では問題なく動作するのに、なぜこのパッケージを解決できないのですか? どうすればこの問題を解決できるでしょうか?
ここですべての専門家に質問jest
!あなたが私を助けてくれることを願っています。ありがとう!