Perpustakaan Pengujian React: Cocokkan Jumlah Tombol

Question

Saya telah membuat aplikasi menggunakan create-react-app. Di bawah ini adalah komponen penghitung dan file pengujian saya. Saya mencoba membuat pengujian untuk tiga tombol statis yang saya miliki di komponen saya. Tes pertama berjalan dengan baik sedangkan tes kedua memberikan kesalahan yang diberikan di bawah ini.

KOMPONEN REAKSI:

    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;

FILE PENGUJIAN:

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

PESAN EROR:

GAGAL src / komponen / Counter / Counter.test.js ● membuat tiga tombol mengharapkan (diterima) .toHaveLength (diharapkan) Matcher kesalahan: nilai yang diterima harus memiliki properti panjang yang nilainya harus berupa angka Diterima memiliki tipe: objek Diterima memiliki nilai: {} 19 | memberikan(); 20 | const items = screen.findAllByRole ('button'); > 21 | mengharapkan (item) .toHaveLength (3); | ^ 22 | }) di Object..test (src / components / Counter / Counter.test.js: 21: 19) *

Answer 1

Dalam contoh yang Anda berikan, Anda sedang menggunakan .findAllByRole('button'), yang mengembalikan janji dan perlu ditunggu seperti ini:

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

Solusi lain adalah menggunakan .getAllByRole('button'), dalam hal ini Anda dapat segera menegaskan hasilnya.