測試React中的上一個和下一個按鈕功能失敗

Question

我的React程式碼測試失敗： 如果我寫錯了，你能幫忙寫對嗎？ 我嘗試使用screen.getByRole('button', {name: '>'})來取得下一個按鈕，使用screen.getByRole('button', {name: '<'})來取得上一個按鈕，甚至嘗試了下面提到的測試程式碼，但測試一直失敗。

export default function App() {

  return (
    <div className="App">
      <div>
        {dogs
          .map((value, key) => (
            <div className="card-container" key={key}>
              <div>
                <img className="img" src={value.imgUrl} alt={value.title} />
              </div>
              <div className="card-footer">
                {dogCurrPage !== 1 ? (
                  <button className="back-button" onClick={() => previous()}>
                    {"<"}
                  </button>
                ) : null}
                <span className="card-title-text">{value.title}</span>
                {dogCurrPage !== dogs.length - 1 ? (
                  <button className="next-button" onClick={() => next()}>
                    {">"}
                  </button>
                ) : null}{" "}
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}

describe("App", () => {
  it("正確處理上一個按鈕的點擊", () => {
    render(<App />);

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

  it("正確處理下一個按鈕的點擊", () => {
    render(<App />);

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

Answer 1

也許嘗試這段程式碼：

describe("App", () => {
  it("正确渲染应用程序", async() => {
    render( < App / > );

    // 根据您的UI组件添加更具体的断言
    expect(screen.getByText("Fetch Api, display 1 card, add comments and likes to those comments")).toBeInTheDocument();
  });

  it("正确处理上一个按钮的点击", async() => {
    render( < App / > );

    fireEvent.click(screen.getByRole("button", {
      name: "<"
    }));
    // 添加断言以检查点击上一个按钮后的行为
  });

  it("正确处理下一个按钮的点击", async() => {
    render( < App / > );

    fireEvent.click(screen.getByRole("button", {
      name: ">"
    }));
    // 添加断言以检查点击下一个按钮后的行为
  });
});