Material UI makeStyles()で作成された条件付きスタイリングをテストする方法は?

Aug 22 2020

私はReactアプリに数週間取り組んでおり、ほとんどの場合、ベースごとにMaterialUIコンポーネントを使用しています。

小道具の値に応じてスタイルが変わるこのコンポーネントがあります。これを行うために、私は次のようなことをしました:

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

getComponentBackgroundColor()ように定義されています

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

次に、コンポーネントのを設定しますclassName

私の問題は、このコンポーネントをテストして、スタイリングが正しく適用されていることを確認したいということです(一部のgetStyle()方法は、小道具が存在するかどうかを確認するよりも複雑です)。

私が使用しreact-testing-libraryているのは、レンダリングされたコンポーネントが正しいかどうかを確認することでしたclassNameが、さらに詳しく調べてmakeStyle()みるとmakeStyles-component-12、各コンポーネントにランダムなclassNameが割り当てられていることがわかりました。また、同じスタイルのコンポーネントのclassNameが異なることにも気づきました。だから、それはノーゴーでした。

マテリアルUIを使用するときに条件付きスタイルをテストする簡単な方法はありmakeStyles()ますか?

本当にありがとう。

回答

1 DobbyDimov Aug 22 2020 at 02:30

テストを特定のクラスまたはcssスタイルと結合することはお勧めしませんが、jest-domの.toHaveStyleマッチャーを使用して、対応する小道具を渡すときに正しいスタイルが適用されるかどうかをテストできます。