रिएक्ट टेस्टिंग लाइब्रेरी: माचिस की संख्या बटन

Question

मैंने 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 /est.test.js ● तीन बटन की अपेक्षा करता है (प्राप्त) .toHaveLength (अपेक्षित) मिलानकर्ता त्रुटि: प्राप्त मूल्य में एक लंबाई गुण होना चाहिए जिसका मान होना चाहिए एक संख्या प्राप्त की गई प्रकार है: प्राप्त की गई मान का मान है: {} 9 | प्रस्तुत करना(); 20 | const आइटम = screen.findAllByRole ('बटन'); > 21 | उम्मीद (आइटम) .toHaveLength (3); | ^ 22 | }) ऑब्जेक्ट पर।

Answer 1

आपके द्वारा दिए गए उदाहरण में, आप उपयोग कर रहे हैं .findAllByRole('button'), जो एक वादा लौटाता है और इस तरह इंतजार करने की जरूरत है:

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

अन्य समाधान का उपयोग करना होगा .getAllByRole('button'), जिस स्थिति में आप तुरंत परिणाम पर जोर दे सकते हैं।