title: React Testing Library: Match Number of Buttons
body: <p>I have created an app using create-react-app. Below is my counter component and testing file. I am trying to create a test for the three static buttons I have in my component. The first test runs fine while the 2nd test gives the error provided below.</p>
  <p>REACT COMPONENT:</p>
  <pre class="lang-js prettyprint-override"><code>    import React from &quot;react&quot;;
      import PropTypes from &quot;prop-types&quot;;
      import classes from &quot;./Counter.module.css&quot;;
      function Counter(props) {
        return (
          &lt;div className={classes.Wrapper}&gt;
            &lt;div&gt;
              &lt;p&gt;
                Click Counter -  {props.value}
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button onClick={props.counterIncrement} className={classes.custButton} name=&quot;first&quot;&gt; Increment &lt;/button&gt;
              {/* &lt;button onClick={props.counterDecrement} className={classes.custButton}&gt; Decrement &lt;/button&gt;
              &lt;button onClick={props.resetCounter} className={classes.custButton}&gt; Reset &lt;/button&gt; */}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
      Counter.propTypes = {
        value: PropTypes.number,
        clickHandler: PropTypes.func,
      };
      export default Counter;
  </code></pre>
  <p>TESTING FILE:</p>
  <pre class="lang-js prettyprint-override"><code>    import React from 'react'
      import {render, fireEvent, screen, cleanup} from '@testing-library/react'
      
      import Counter from &quot;./Counter&quot;;
      
      
      afterEach(cleanup);
      
      describe('Counter', () =&gt; {
          test('renders counter value 10', () =&gt; {
            render(&lt;Counter /&gt;);
            //screen.debug();
            expect(screen.getByText(/Click Counter -/)).toBeInTheDocument();
          })
      
      })
      
      test('renders three buttons', () =&gt; {
          render(&lt;Counter /&gt;);
          const items = screen.findAllByRole('button');
          expect(items).toHaveLength(3);
        })
  </code></pre>
  <p>ERROR MESSAGE:</p>
  <blockquote>
  <p>FAIL  src/components/Counter/Counter.test.js
  ● renders three buttons
  expect(received).toHaveLength(expected)
  Matcher error: received value must have a length property whose value must be a number
  Received has type:  object
  Received has value: {}
  19 |     render();
  20 |     const items = screen.findAllByRole('button');
  &gt; 21 |     expect(items).toHaveLength(3);
  |                   ^
  22 |   })
  at Object..test (src/components/Counter/Counter.test.js:21:19)*</p>
  </blockquote>