Библиотека тестирования React: стиль ошибки теста (Select + Form Control из MUI)

Эта проблема

Я пытаюсь проверить, что граница красная, если компонент находится в состоянии ошибки, но он не работает на локальном компьютере, но не в codeandbox

Что я пробовал:

  • Проверьте, есть ли разница между FormHelperText а также fieldSet в стиле
  • Пытался реплицировать по codeandbox
  • читать документы и исследования нашли аналогичный случай, но использует другой стиль: https://twitter.com/hieptuanle5/status/1051811353176858625

Компонент кода с состоянием ошибки, установленным наtrue

import React from "react";
import "./styles.css";
import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";
import Select from "@material-ui/core/Select";

export const SelectInput = () => {
  return (
    <FormControl error={true} variant="outlined">
      <Select />
      <FormHelperText> test </FormHelperText>
    </FormControl>
  );
};

Тестирование

import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { SelectInput } from "../App";
test("test form control error state", async () => {
  render(<SelectInput />);

  const fieldSet = screen.getByRole("group", { hidden: true });
  const helperText = screen.getByText("test");
  await waitFor(() => expect(fieldSet).toBeInTheDocument());

  expect(helperText).toHaveStyle(`color: #f44336;`);
  expect(fieldSet).toHaveStyle(`border-color: #f44336;`);
});

Codeanbox ссылка https://codesandbox.io/s/rtl-mui-select-test-style-border-tekgl?file=/src/__test__/select.test.js:0-549

РЕДАКТИРОВАТЬ 2 Журналы ошибок локального компьютера:

  ● should accept error string props

    expect(element).toHaveStyle()

    - Expected

    - border-color: #f44336;
    + border-color: rgba(0, 0, 0, 0.23);

    >  97 |   expect(fieldSet).toHaveStyle(`border-color: #f44336;`)

Будем очень признательны за любые запросы. Спасибо

0 ответов

Другие вопросы по тегам