Определить значок на этикетке чипа - отреагировать - PullRequest
0 голосов
/ 23 апреля 2020

Я работаю над приложением интерфейса / материала. Внутри одного из моих компонентов я создаю группу 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 этого теста, пожалуйста?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...