javascript - React 测试库：测试失败样式（从 MUI 中选择 + 表单控件）

Question

问题

如果组件处于错误状态，我正在尝试测试边框是否为红色，但它在本地机器中失败，但在代码和框中没有

我试过的：

• FormHelperText检查样式和fieldSet样式是否有区别
• 试图通过代码沙箱复制
• 阅读文档和研究发现了一个类似的案例，但使用了不同的样式：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;`);
});

codesanbox链接 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;`)

任何线索将不胜感激。谢谢

标签： javascriptreactjsmaterial-uireact-testing-libraryjest-dom