Bibliothèque de tests de réaction: faire correspondre le nombre de boutons

Question

J'ai créé une application en utilisant create-react-app. Voici mon composant de compteur et mon fichier de test. J'essaye de créer un test pour les trois boutons statiques que j'ai dans mon composant. Le premier test fonctionne correctement tandis que le 2ème test donne l'erreur fournie ci-dessous.

RÉAGIR LE COMPOSANT:

    import React from "react";
    import PropTypes from "prop-types";
    import classes from "./Counter.module.css";
    function Counter(props) {
      return (
        <div className={classes.Wrapper}>
          <div>
            <p>
              Click Counter -  {props.value}
            </p>
          </div>
          <div>
            <button onClick={props.counterIncrement} className={classes.custButton} name="first"> Increment </button>
            {/* <button onClick={props.counterDecrement} className={classes.custButton}> Decrement </button>
            <button onClick={props.resetCounter} className={classes.custButton}> Reset </button> */}
          </div>
        </div>
      );
    }
    Counter.propTypes = {
      value: PropTypes.number,
      clickHandler: PropTypes.func,
    };
    export default Counter;

FICHIER DE TEST:

    import React from 'react'
    import {render, fireEvent, screen, cleanup} from '@testing-library/react'
    
    import Counter from "./Counter";
    
    
    afterEach(cleanup);
    
    describe('Counter', () => {
        test('renders counter value 10', () => {
          render(<Counter />);
          //screen.debug();
          expect(screen.getByText(/Click Counter -/)).toBeInTheDocument();
        })
    
    })
    
    test('renders three buttons', () => {
        render(<Counter />);
        const items = screen.findAllByRole('button');
        expect(items).toHaveLength(3);
      })

MESSAGE D'ERREUR:

FAIL src / components / Counter / Counter.test.js ● rend trois boutons attendus (reçus) .toHaveLength (attendu) Erreur de correspondance: la valeur reçue doit avoir une propriété length dont la valeur doit être un nombre Reçu a le type: l'objet Reçu a la valeur: {} 19 | rendre(); 20 | éléments const = screen.findAllByRole ('bouton'); > 21 | expect (items) .toHaveLength (3); | ^ 22 | }) à Object..test (src / components / Counter / Counter.test.js: 21: 19) *

Answer 1

Dans votre exemple fourni, vous utilisez .findAllByRole('button'), qui renvoie une promesse et doit être attendue comme ceci:

test('renders three buttons', async () => {
  render(<Counter />)
  const items = await screen.findAllByRole('button')
  expect(items).toHaveLength(3)
})

L'autre solution serait d'utiliser .getAllByRole('button'), auquel cas vous pouvez vous affirmer immédiatement sur le résultat.