javascript — проверка, отображается ли определенное количество объектов

Проверка, отображается ли определенное количество объектов

Мне дан компонент, который отображает число по умолчанию 5 звезд на экране, с которым пользователь может взаимодействовать. Я пытаюсь написать модульный тест, чтобы убедиться, что на экране отображается 5 звезд. Я попробовал следующее, так как звезды — это потрясающие шрифты символы с атрибутом svg, но, похоже, это не работает, и я не понимаю, почему. Вот StarRating.js:

 import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faStar } from "@fortawesome/free-solid-svg-icons"; function Star({ number, value, onClick, emptyColor, filledColor, size }) { function handleClick() { onClick(number === value ? 0 : number); } return ( {amp}lt;span className="clickable" onClick={handleClick} data-index={`star-${number}`} {amp}gt; {amp}lt;FontAwesomeIcon icon={faStar} color={number {amp}lt;= value ? filledColor : emptyColor} size={size} /{amp}gt; {amp}lt;/span{amp}gt; ); } export default function StarRating(props) { const { className, value, onClick, emptyColor = "#bbb", filledColor = "yellow", size = "1x", starCount = 5 } = props; return ( {amp}lt;span className={className}{amp}gt; {[...Array(starCount).keys()].map(position ={amp}gt; { return ( {amp}lt;Star emptyColor={emptyColor} filledColor={filledColor} size={size} number={position   1} value={value} key={position} onClick={onClick} /{amp}gt; ); })} {amp}lt;/span{amp}gt; ); } 

А вот и мой юнит тест:

 it('renders 5 stars by default', () ={amp}gt; { const {container}=render({amp}lt;StarRating/{amp}gt;); expect(container.find('svg')); expect(container.find('svg')); expect(container.find('svg')); expect(container.find('svg')); expect(container.find('svg')); }); 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector