【React】イベントをテストする際のasyncを付与する理由は何でしょうか

Question

実現したいこと

イベントをテストする際にtest()にasyncを付与するのは、どのような理由があるのでしょうか？

発生している問題・分からないこと

現時点の私の解釈だと、asyncは非同期処理を行いたい関数に付与し、その関数内でawaitを付与することで各々の処理を同期的に行うと思っています。
関数だと上記の意図になると思っていますが、テストする際に何故非同期にする必要があるのか把握できておりません。

テスト対象のPra2.jsはstateを使用しているため、以下の全ての工程が終わるまでテストしないという理由でasyncを付与しているのでしょうか？
①onClickイベント発火（handleClick()呼び出し）
②（handleClick()内で）setCount()呼び出し
③state値更新
④ビューの再レンダリング

ご存じの方、ご教示頂きく思います。
宜しくお願いします。

該当のソースコード

import { useState } from "react"


export default function Pra2({init}) {
  const [count, setCount] = useState(init)

  // カウントボタン押下時の処理
  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <>
      <button type="button" onClick={handleClick}>カウント</button>
      <p>{count}回、クリックされました。</p>
    </>

  )
}

import { render, waitFor, screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import Pra2 from "../practiceFiles/Pra2";

// Pra2.jsのテストファイル
describe("Pra2のテスト", () => {
  test("Pra2's event test", async () => {
    // userEventオブジェクトを生成
    const ev = userEvent.setup();

    render(<Pra2 init={0} />);
    const button = screen.getByRole("button", { name : "カウント"});
    const text = screen.getByText(/クリック/);

    ev.click(button);
    await waitFor(() => { expect(text).toHaveTextContent("1回")});
  })
})

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

async, awaitを削除して再度テストを行いましたが、テスト結果が同じだったため違いが分かりませんでした。

補足

特になし

Answer 1

なぜテスト関数に async を付与するのか？

Reactの setState は非同期処理のため、テストがすぐに実行されると正しい結果を取得できない。
await screen.findByText() や waitFor() を使うことで、Reactの更新を待つことができる。
非同期のUI更新を確認する場合、async/await を活用しないと、テストが失敗しやすい。
async を付けることで、Reactの非同期レンダリングを適切に待ち、テストの安定性を向上させることができます！ 🚀

Comments

[kosuke05]

Pomu3270様
返信が遅くなりすみません。

今回stateを更新する過程が非同期処理に該当すると初めて知りました。
ベストアンサーとさせて頂きます。
詳しくご教示頂き有難うございました。

Answer 2

テスト対象のPra2.jsはstateを使用しているため

そもそも論として、stateの変更そのものが非同期的な操作です。

Comments

[kosuke05]

maisumakun様
返信が遅くなりすみません。

stateの変更が非同期処理と初めて知ったため勉強になりました。
ご教示頂き有難うございました。

Answer 3

jest でも vitest でも Promise を返す関数を実行する場合は、それの完了を待つ為に async/await 等により Promise を返す必要があります。

（今回は偶然待つ時間が短かった為うごいていただけかもしれません。

以下参考の記述

promiseを返す、またはawaitするようにしましょう。returnまたはawaitを省いた場合、fetchDataから返されるpromiseがresolveまたはrejectされる前に、テストが終了してしまいます。

https://jestjs.io/ja/docs/asynchronous

When a test function returns a promise, the runner will wait until it is resolved to collect async expectations. If the promise is rejected, the test will fail.

https://vitest.dev/api/#test-api-reference

Comments

[kosuke05]

juner様
返信が遅くなりすみません。

今回stateが絡んでいたため非同期処理でテストしないといけないと知りました。
参考サイト含め、詳しくご教示頂き有難うございます。

Answer 4

基本的にウェイト関連の処理はworker処理をpromiseで制御するのでawaitでタイミングをとる必要があるのだと思います。

Comments

[kosuke05]

yambejp様
返信が遅くなりすみません。

awaitでmatcherの箇所のみ同期的にすることで、stateの更新後にテストができると解釈させて頂きました。
ご教示頂き有難うございました。