Блог

Я пытаюсь проверить, есть ли количество кнопок, указанных в компоненте React.

Я попытался найти в Google ответ на этот вопрос, но мне это не удалось.

Я получаю следующую ошибку: Unable to find an accessible element with the role "button".

Я получаю эту ошибку, вероятно, потому, что в коде нет тегов кнопок. смотреть ниже.

Итак, мой вопрос заключается в том, учитывая приведенный ниже код, как мне проверить, было ли отображено правильное количество кнопок? Я пытаюсь проверить это с помощью библиотеки тестирования реакций. Спасибо.

Вот соответствующий код —

  const { alignItems, direction, tab, title, description, buttons, pic } =
    props;
...
 <Grid container spacing={2}>
            {buttons.map((button, i) => (
              // eslint-disable-next-line react/no-array-index-key
              <Grid item key={i}>
                {button}
              </Grid>
            ))}
          </Grid>
...

HomeSection.propTypes = {
  alignItems: PropTypes.string,
  direction: PropTypes.string,
  tab: PropTypes.string,
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  buttons: PropTypes.arrayOf(PropTypes.element).isRequired,
  pic: PropTypes.string.isRequired,
};
 

вот текущий код, который я написал. (это неверно, но это может быть полезно показать.)

  test('checks if it renders the given number of buttons', () => {
         render(<HomeSection
                  title="Topology"
                  description="Math course"
                  buttons={[]}
                  pic="manifold"/>
               );
        screen.debug();
        const items = screen.getByRole('button');
        expect(items).toHaveLength(0);
    });