React Test Kitaplığı: Düğme Sayısı Eşleştirme

Question

Create-react-app kullanarak bir uygulama oluşturdum. Aşağıda sayaç bileşenim ve test dosyam var. Bileşenimde bulunan üç statik düğme için bir test oluşturmaya çalışıyorum. İlk test iyi çalışır, 2. test ise aşağıda verilen hatayı verir.

TEPKİ BİLEŞENİ:

    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;

TEST DOSYASI:

    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);
      })

HATA MESAJI:

FAIL src / components / Counter / Counter.test.js ● beklenen (alınan) üç düğmeyi oluşturur .toHaveLength (beklenen) Eşleştirici hatası: Alınan değer, değeri bir sayı olması gereken bir uzunluk özelliğine sahip olmalıdır Alınan tür: Alınan nesnenin değeri: {} 19 | render (); 20 | const öğeler = screen.findAllByRole ('düğme'); > 21 | beklenen (öğeler) .toHaveLength (3); | ^ 22 | }) Object..test'te (src / components / Counter / Counter.test.js: 21: 19) *

Answer 1

Sağladığınız örnekte, .findAllByRole('button')bir söz veren ve böyle beklenmesi gereken kullanıyorsunuz:

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

Diğer çözüm kullanmaktır .getAllByRole('button'), bu durumda sonucu hemen iddia edebilirsiniz.