問題タブ [testing-library]

自分の主張がうまくいかない理由を理解するのに苦労しています。

DOM は次のとおりです。

そして、ここに私の主張があります：

非表示フラグに関するドキュメントを読みましたが、これが機能しない理由を理解するのにまだ問題があります。

何か案は？

私は多くの調査を行ってきましたが、ウィンドウ フォーカス イベントを正常にシミュレートする方法を見つけることができません。

「testing-library/user-event」を調べましたが、まだこれを行う方法が見つかりません。

私のコンポーネントにはありますwindow.addEventListener('focus', doSomething);が、これはテストランナーを介して呼び出されることはありません。

警告の原因となる状態の更新後にアサートするものが何もない場合に、Jest/testing-library によってスローされる「act(...) にラップされていません」という警告を防ぐ方法があるかどうかを調べようとしています。または、この警告を無視する必要がある場合。

次の単純なコンポーネントがあるとします。

getData()このコンポーネントがデータを返さなくても正常にレンダリングされることを簡単にテストしたいとします。

だから私はこのようなテストを持っています:

このテストはパスしますが、「act(...) にラップされていません」という警告が表示されます。これは、テストが終了する前に終了するgetData()ためです。

この場合、からの応答は、最初にコンポーネントの上部にgetData()設定arrした値 (空の配列) に設定されます。そのため、非同期関数が完了した後も UI は変更されません。まだ「配列項目なし」と書かれている段落を見ているだけなので、状態の更新を待つと主張できるものは何もありません。完了します。

できますがexpect(getData).toHaveBeenCalledTimes(1)、関数呼び出し後に状態が実際に更新されるのを待ちません。

setArr(items)発生する時間を確保するために、テストで任意の一時停止を試みました。

しかし、それは役に立たないようです。正直なところ、その理由はわかりません。

テストのみを変更して、この状況を処理する方法はありますか?

MyComponent をリファクタリングすることで問題を解決できると確信しています。たとえば、arrMyComponent を prop として渡し、呼び出しを親コンポーネントに移動するか、呼び出しを完全にgetData()スキップするテスト専用のカスタム prop を作成しますが、私はしません。getData()テストでの警告を避けるためだけにコンポーネントを変更したくない。

私はtesting-library/react v11.2.2 を使用しています。

私の Svelte アプリケーションでは、svelte-testing-libraryを使用して、特定の API 要求 ( mswを使用) が成功したときに要素が削除されることをテストしようとしていますが、エラーが返されたときは削除されません。

ハッピーパスの確認は簡単です

しかし、リクエストが失敗したときに要素が削除されていないことを確認する「正しい」方法は何ですか? カスタム setTimeout(...) を追加することもできますが、それは最適なソリューションとは思えません。

アサーションを行う前に、リクエストが完了して処理されたことを簡単に確認する方法はありますか?

Foo.svelte

Foo.spec.js