Unable to click on stars in React testing library.

[muhammadali-HazelSoft]

How can i clicks on the star rating. I tried so much. <div className="text-center mt-3"> <Rating initialValue={rating} onClick={handleRating} fillColor={surveyTheme?.mainThemeColor || "#F1A900"} fillIcon={ <RxStarFilled size={50} aria-label="filled-stars" role="button" /> } emptyIcon={ <RxStar size={50} color={surveyTheme?.mainThemeColor || "#F1A900"} aria-label="unfilled-stars" role="button" /> } allowHover={false} aria-label="ranking-stars" as="button" /> </div>

[Parassharmaa]

AFAIK, The pointerMove event is being used to keep track of the hoverValue, and then the click event is used to save the hoverValue.

The following series of events can be used to simulate the rating change using the react testing library.

...
const ratingStar = getByRole('rating').querySelector('.star-svg');
const ratingContainer = getByRole('rating').querySelector('.react-simple-star-rating'),

fireEvent.pointerMove(ratingStar);
fireEvent.click(ratingContainer);
...

<div role="rating">
    <Rating onClick={...} />
</div>