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

Question

Мне дан компонент, который отображает число по умолчанию 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 (
    <span
      className="clickable"
      onClick={handleClick}
      data-index={`star-${number}`}
    >
      <FontAwesomeIcon
        icon={faStar}
        color={number <= value ? filledColor : emptyColor}
        size={size}
      />
    </span>
  );
}

export default function StarRating(props) {
  const {
    className,
    value,
    onClick,
    emptyColor = "#bbb",
    filledColor = "yellow",
    size = "1x",
    starCount = 5
  } = props;

  return (
    <span className={className}>
      {[...Array(starCount).keys()].map(position => {
        return (
          <Star
            emptyColor={emptyColor}
            filledColor={filledColor}
            size={size}
            number={position + 1}
            value={value}
            key={position}
            onClick={onClick}
          />
        );
      })}
    </span>
  );
}

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

it('renders 5 stars by default', () => {
   const {container}=render(<StarRating/>);
    expect(container.find('svg'));
    expect(container.find('svg'));
    expect(container.find('svg'));
    expect(container.find('svg'));
    expect(container.find('svg'));
});