React에서 이전 및 다음 버튼 기능 테스트에 실패했습니다.

Question

내 React 코드가 테스트에 실패했습니다. 내가 잘못 썼다면, 올바르게 쓸 수 있도록 도와주실 수 있나요? screen.getByRole('button', {name: '>'}) 을 사용하여 다음 버튼을 가져오고 screen.getByRole('button', {name: '<'}) 을 사용하여 이전 버튼인 Even을 가져왔습니다. 아래에 언급된 테스트 코드를 시도했지만 테스트가 계속 실패했습니다.

기본 함수 내보내기 App() {

  반품 (
    <div className="앱">
      <div>
        {개
          .map((값, 키) => (
            <div className="card-container" key={key}>
              <div>
                <img className="img" src={value.imgUrl} alt={value.title} />
              </div>
              <div className="card-footer">
                {dogCurr페이지 !== 1 ? (
                  <button className="back-button" onClick={() =>이전()}>
                    {"<"}
                  </버튼>
                ) : 없는}
                <span className="card-title-text">{value.title}</span>
                {dogCurrPage !== 개.길이 - 1 ?
                  <button className="next-button" onClick={() =>다음()}>
                    {">"}
                  </버튼>
                ) : 없는}{" "}
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}

describe("앱", () => {
  it("이전 버튼의 클릭을 적절하게 처리합니다.", () => {
    render(<앱 />);

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

  it("다음 버튼의 클릭을 적절하게 처리합니다.", () => {
    render(<앱 />);

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

Answer 1

다음 코드를 사용해 보세요:

으아악