Я работаю над приложением интерфейса / материала. Внутри одного из моих компонентов я создаю группу Chip
s, перебирая некоторые карты (отсюда и index1
, index2
и value
ниже). Если щелкнуть Chip
, то к ярлыку добавляется StarRateIcon
, чтобы указать, какой Chip
последний раз был нажат - состояние хранит id
из последних нажатых Chip
. Если снова нажать Chip
, StarRateIcon
снова исчезнет. Следующий код выделяет соответствующие части того, что я делаю:
import React from 'react';
import Chip from '@material-ui/core/Chip';
import StarRateIcon from '@material-ui/icons/StarRate';
export default function Example(){
const [clickedKey, setClickedKey] = React.useState(null);
return(
...
<Chip
data-testid={`chip-${index1}-${index2}`}
label={
<span>
{value}
{clickedKey === `chip-${index1}-${index2}` ? <StarRateIcon /> : null}
</span>
}
onClick={() => {
setClickedKey(filterKey !== `chip-${index1}-${index2}` ? `chip-${index1}-${index2}` : null
}}
/>
...
);
}
Затем я wi sh, чтобы проверить, что при нажатии на данный Chip
, что StarRateIcon
виден в этом Chip
. В проекте используется jest
, поэтому мне тоже нужно это сделать.
Пока у меня есть следующее:
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Example from '<path>/Example';
it('star icon is visible when chip is clicked', () {
const { getByTestId } = render (
<Example />
);
const chip = getByTestId('chip-0-0');
fireEvent.click(chip);
// TODO what next?
// expect(chip).
});
, но я не могу тогда определить, что делать expect
в конце. Если я использую
expect(chip).toHaveTextContent(`example ${<StarRateIcon />}`)
, произойдет сбой, так как StarRateIcon
не включается в текстовое содержимое. Вот как я бы это сделал, если бы не было StarRateIcon
, чтобы рассмотреть, и действительно это работает для всех чипов, которые не были нажаты и не отображают StarRateIcon
.
Я также пытался
expect(chip).toBe(`example ${<StarRateIcon />}`)
но это тоже не сработало.
Я немного поохотился и поигрался с некоторыми другими функциями, доступными в expect
, но ни одна из них, похоже, не помечается до существования StarRateIcon
.
Я очень новичок в разработке и тестировании внешнего интерфейса - может кто-нибудь указать мне на приемлемый способ выполнения sh этого теста, пожалуйста?