Thư viện kiểm tra phản ứng: Số nút khớp

Question

Tôi đã tạo một ứng dụng bằng cách sử dụng create-react-app. Dưới đây là thành phần bộ đếm và tệp thử nghiệm của tôi. Tôi đang cố gắng tạo thử nghiệm cho ba nút tĩnh mà tôi có trong thành phần của mình. Thử nghiệm đầu tiên chạy tốt trong khi thử nghiệm thứ hai cho lỗi được cung cấp bên dưới.

THÀNH PHẦN PHẢN ỨNG:

    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;

TẬP TIN KIỂM TRA:

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

THÔNG BÁO LỖI:

FAIL src / components / Counter / Counter.test.js ● hiển thị ba nút mong đợi (đã nhận) .toHaveLength (mong đợi) Lỗi đối sánh: giá trị nhận được phải có thuộc tính độ dài có giá trị phải là số Nhận có kiểu: đối tượng Đã nhận có giá trị: {} 19 | kết xuất (); 20 | const items = screen.findAllByRole ('nút'); > 21 | mong đợi (các mục) .toHaveLength (3); | ^ 22 | }) tại Object..test (src / components / Counter / Counter.test.js: 21: 19) *

Answer 1

Trong ví dụ đã cung cấp của bạn, bạn đang sử dụng .findAllByRole('button'), trả về một lời hứa và cần được chờ đợi như vậy:

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

Giải pháp khác sẽ là sử dụng .getAllByRole('button'), trong trường hợp đó bạn có thể khẳng định kết quả ngay lập tức.