Библиотека тестирования 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;`)
Будем очень признательны за любые запросы. Спасибо