Le test de la fonctionnalité des boutons précédent et suivant dans React échoue

Question

Mon code React échoue au test : Si je l'ai mal écrit, pouvez-vous m'aider à l'écrire correctement ? J'ai essayé d'utiliser screen.getByRole('button', {name: '>'}) pour obtenir le bouton suivant et screen.getByRole('button', {name: '<'}) pour obtenir le bouton précédent, même j'ai essayé le code de test mentionné ci-dessous mais le test a continué à échouer.

exporter la fonction par défaut App() {

  retour (
    

      

        {chiens
          .map((valeur, clé) => (
            

              

                
              
              

                {chienCurrPage !== 1 ?
                   précédent()}>
                    {"≪"}
                  
                ) : nul}
                {value.title}
                {dogCurrPage !== chiens.longueur - 1 (
                   next()}>
                    {">"}
                  
                ) : nul}{" "}
              
            
          ))}
      
    
  );
}
describe("App", () => {
  it("Gérer correctement le clic du bouton précédent", () => {
    rendre();

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

  it("Gérer correctement le clic du bouton suivant", () => {
    rendre();

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

Answer 1

Essayez peut-être ce code :

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: ">"
    }));
    // 添加断言以检查点击下一个按钮后的行为
  });
});