javascript - 如何测试使用 Material UI makeStyles() 制作的条件样式？

Question

我已经在 React 应用程序上工作了几个星期，并且我大部分时间都使用 Material UI 组件。
我有这个组件，它的样式会根据其 Prop 的值而改变。为此，我做了类似的事情:

  const useStyles = makeStyles({
    component: {
      ...
      backgroundColor: getComponentBackgroundColor(),
      ...
    }
  });

与 getComponentBackgroundColor()被定义为

  const getComponentBackgroundColor = () => {
    if (props.someProp) {
      return "green";
    }
    return "red";
  };

然后通过设置组件的 className .
我的问题是我想测试这个组件以确保正确应用样式(一些 getStyle() 方法比仅仅查看是否存在 Prop 更复杂)。
我正在使用 react-testing-library我的第一 react 是检查渲染的组件是否正确 className ，但经过进一步检查，我意识到 makeStyle()分配一些随机的类名，如 makeStyles-component-12到每个组件。我还注意到具有相同样式的组件具有不同的类名。所以这是不行的。
使用 Material UI 的 makeStyles() 时是否有一种简单的方法来测试条件样式？ ?
谢谢一堆。

Answer 1

虽然不建议将您的测试与特定的类或 css 样式结合起来，但您可以使用 jest-dom的.toHaveStyle matcher 来测试在传递相应的 props 时是否应用了正确的样式。