小编Gow*_*ena的帖子

我在应用程序中使用 Material UI 选项卡并使用 React 测试库。我需要编写用于从一个选项卡导航到另一个选项卡的测试用例。任何人都可以帮我解决这个问题，因为下面的代码无法正常工作。提前致谢。

代码：

const [value, setValue] = React.useState(0)

function handleChange(event, newValue) {
  setValue(newValue)
}

<AntTabs value={value} onChange={handleChange} aria-label="Unit information">
  <AntTab label="HELLOW1" {...unitTabProps(0)} />
  <AntTab label="HELLOW2" {...unitTabProps(1)} />
  <AntTab label="HELLOW3" {...unitTabProps(2)} />
  <AntTab label="HELLOW4" {...unitTabProps(3)} />
  <AntTab label="HELLOW5" {...unitTabProps(4)} />
</AntTabs>

我有两个根据屏幕尺寸显示的按钮（对于中屏幕，一个按钮，对于其他屏幕，另一个按钮）。我使用 Material UI 的 MediaQuery 和 theme.breakpoints 来定义屏幕尺寸。

这是我的 UI 代码，我在 React 中使用 Typescript。

import React from "react";
import Button from "@material-ui/core/Button";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme } from "@material-ui/core/styles";

export default function SimpleCard() {
  const theme = useTheme();
  const isMd = useMediaQuery(theme.breakpoints.only("md"));

  return (
    <div>
      {isMd ? (
        <Button
          data-testid="mediumScreenButton"
          onClick={() => console.log("medium")}
        >
          medium screen
        </Button>
      ) : (
        <Button
          data-testid="otherScreenButton"
          onClick={() => console.log("other")}
        >
          Other screen
        </Button>
      )}
    </div>
  );
}

这是我的测试代码

import …