0

问题

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

我试过的:

错误状态设置为的代码组件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;`)

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

4

0 回答 0