測試React中的上一個和下一個按鈕功能失敗
P粉936509635
P粉936509635 2023-08-15 13:54:35
0
1
468
<p>我的React程式碼測試失敗: 如果我寫錯了,你能幫忙寫對嗎? 我嘗試使用screen.getByRole('button', {name: '>'})來取得下一個按鈕,使用screen.getByRole('button', {name: '<'})來取得上一個按鈕,甚至嘗試了下面提到的測試程式碼,但測試一直失敗。 </p> <pre class="brush:php;toolbar:false;">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> ); }</pre> <pre class="brush:php;toolbar:false;">describe("App", () => { it("正確處理上一個按鈕的點擊", () => { render(<App />); fireEvent.click(screen.getByText("<")); }); it("正確處理下一個按鈕的點擊", () => { render(<App />); fireEvent.click(screen.getByText(">")); }); });</pre>
P粉936509635
P粉936509635

全部回覆(1)
P粉648469285

也許嘗試這段程式碼:

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: ">"
    }));
    // 添加断言以检查点击下一个按钮后的行为
  });
});
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板