React Testing Library : 버튼 수 일치

Aug 16 2020

create-react-app을 사용하여 앱을 만들었습니다. 아래는 내 카운터 구성 요소 및 테스트 파일입니다. 내 구성 요소에있는 세 개의 정적 버튼에 대한 테스트를 만들려고합니다. 첫 번째 테스트는 정상적으로 실행되고 두 번째 테스트는 아래 제공된 오류를 제공합니다.

반응 부품 :

    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;

테스트 파일 :

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

에러 메시지:

FAIL src / components / Counter / Counter.test.js ● 3 개의 버튼을 예상 (수신) .toHaveLength (예상) 렌더링합니다. Matcher 오류 : 수신 된 값에는 값이 숫자 여야하는 길이 속성이 있어야합니다. 수신 된 유형 : 수신 된 개체에 값이 있습니다. {} 19 | 세우다(); 20 | const 항목 = screen.findAllByRole ( 'button'); > 21 | expect (항목) .toHaveLength (3); | ^ 22 | }) at Object..test (src / components / Counter / Counter.test.js : 21 : 19) *

답변

2 DobbyDimov Aug 16 2020 at 01:05

제공된 예제에서 .findAllByRole('button')약속을 반환하고 다음과 같이 기다려야하는를 사용하고 있습니다.

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

다른 해결책은를 사용하는 것 .getAllByRole('button')입니다.이 경우 결과를 즉시 주장 할 수 있습니다.