クエリを待つライブラリのテスト

これまで、我々は主にdirect queries to find elementsを使用しています.
場合によっては、問い合わせを待つ必要があります.
以下に例を示します:
の要素のフェード

要素のみがユーザーインタラクション

の後に表示されます

要素は、ユーザアクション

の後に消えるかもしれません

Findbyクエリの使用

これに対処する最も簡単な方法は、Findbyクエリを使用しています.
それらはgetByとwaitForの組み合わせです.
ボタンにいくつかのユーザーの相互作用があるとしましょう.
クリックすると、要素を新しいテキストで再表示するのを待つ必要があります.

const button = screen.getByRole('button');
button.click();
await screen.findByText('Clicked once');
button.click();
await screen.findByText('Clicked twice');

ご覧のように、2つの後者は、期待を待っているチェックに基づいている.
テストライブラリがセレクタヘルパーのみであることを覚えておいてください.そうすれば、これが真であるかどうかをチェックするために、いくつかのテストライブラリjestを使う必要があります.

const button = screen.getByRole('button');
button.click();
expect(await screen.findByText('Clicked once')).toBeInTheDocument();
button.click();
expect(await screen.findByText('Clicked twice')).toBeInTheDocument();

waitforの使用

場合によっては、実行する関数を待つ必要があるかもしれません.
または、多分、我々は次のことをすることができる前に、若干の時間が通るのを待つ必要があります.
これは、findBy関数が便利になる場所です.これでコードをラップできます.
たとえば、約束が拒絶を投げるまで、waitForで約束を包むことは待ちます.

await waitFor(() => {
  expect(mockCall).toHaveBeenCalledTimes(1);
});

上の例では、APIを呼び出すのを待っていますが、一度だけ呼び出されたら、この手順を実行します.
また、このwaitForにいくつかのオプションを渡すこともできます.

waitFor : HTML要素、デフォルトでは、グローバル文書

container :デフォルト1000 ms

timeout :デフォルト50 ms

interval :コンソールでコンテナとエラーを出力しますが、この

を上書きできます.

onTimeout :変更をチェックする実際の動作

WaitForElementToberBervedの使用

我々が現在行動中でmutationObserverOptionsを見たので、我々はまた、waitForを活用することができます.
名前が示すように、要素を削除するのを待つことができます.
それはwaitForElementToBeRemovedと同じ呼び出し署名とオプションを持ちます.
これは1つを取ることができる、または複数の要素が削除されるのを待ちます.

waitForElementToBeRemoved(document.queryByRole('button')).then(() =>
  console.log('Button no longer in DOM')
);

または複数の場合

waitForElementToBeRemoved(document.queryAllByRole('img')).then(() =>
  console.log('All images are gone')
);

そして、それは、我々が要素が現れるのを待つことができる方法であるか、修正されるか、DOMから取り除かれます.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook