0

Стек технологий: Typescript, React, Jest, React Testing Library У меня есть компонент:

const Button: FunctionComponent<ButtonProps> = ({
  size = 'default',
  type = 'default',
  htmlType = 'button',
  icon,
  children,
  ...otherProps
}) => {
  let Component;
  if (type === 'primary') {
    Component = PrimaryButton;
  } else if (type === 'outline') {
    Component = OutlineButton;
  } else if (type === 'danger') {
    Component = DangerButton;
  } else if (type === 'dark') {
    Component = DarkButton;
  } else {
    Component = DefaultButton;
  }

  let layout: StyledButtonProps['layout'] = size;
  if (icon) {
    if (size !== 'large') {
      layout = !!children ? 'medium' : 'icon';
    }
  }
  return (
    <Component type={htmlType} {...otherProps} layout={layout}>
      {icon ? <Icon>{icon}</Icon> : null}
      {children}
    </Component>
  );
};

Как мне протестировать, что в случае переданного свойства type='primary' отрисуется правильный компонент PrimaryButton?

Спасибо.

1 ответ 1

0

Там нет ничего сложного. Пошаговое руководство.

  1. Рендерить компонент, который будем проверять.
  2. Отправить правильный атрибут.
  3. Проверить отрисовывается или нет.

Пример:

  1. render(<Button type="primary" />);

  2. const primaryButton = screen.getByRole("button", { name: /primary/i }); Если у вас там вместо тега button другой тег или имя отличаются, то поменяйте на правильный.

  3. expect(primaryButton).toBeInTheDocument(); Существование кнопки можно разными способами проверить. Если ваша кнопка содержит специфический клас, то можно через него проверять.

    expect(primaryButton).toHaveClass("primary");

Финальный код будет таким.

test("Render correct button", () => {
  render(<Button type="primary" />);
  const primaryButton = screen.getByRole("button", { name: /primary/i });

  expect(primaryButton).toBeInTheDocument();
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.