React での前ボタンと次ボタンの機能のテストが失敗する

Question

私の React コードはテストに失敗します: もし私が間違って書いてしまったら、正しく書くのを手伝ってもらえますか？ screen.getByRole('button', {name: '>'}) を使用して次のボタンを取得し、screen.getByRole('button', {name: '<'}) を使用して前のボタンを取得しようとしました。以下に示すテストコードを試しましたが、テストは失敗し続けました。

デフォルト関数 App() をエクスポート {

  戻る （
    <div className="アプリ">
      <div>
        {犬
          .map((値, キー) => (
            <div className="カードコンテナ" key={key}>
              <div>
                <img className="img" src={value.imgUrl} alt={value.title} />
              </div>
              <div className="カードフッター">
                {dogCurrPage !== 1 ? (
                  <button className="back-button" onClick={() =>Previous()}>
                    {"<"}
                  </ボタン>
                ） ： ヌル}
                <span className="card-title-text">{value.title}</span>
                {dogCurrPage !== 犬の長さ - 1 ? (
                  <button className="next-button" onClick={() => next()}>
                    {">"}
                  </ボタン>
                ） ： ヌル}{" "}
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}

describe("アプリ", () => {
  it("前のボタンのクリックを適切に処理します", () => {
    render(<App />);

    fireEvent.click(screen.getByText("<"));
  });

  it("次へボタンのクリックを適切に処理する", () => {
    render(<App />);

    fireEvent.click(screen.getByText(">"));
  });
});

Answer 1

このコードを試してみてください:

リーリー