初めて簡単なテストをかけた

formのコンポーネントに対してテストをしてみた。 テストの良し悪しは知らんけど、初めてテストかけたのが嬉しすぎる。

ただ、useFormを使ったりする部分でテストないでhookが使えなかったのでどうしようかなって思ってたら、そういうライブラリがすでにあるみたい。

testing-library/react-hookを使ってみた。

const { result } = renderHook(() => {
  return useForm({
    defaultValues: {
      test: [{ item: 1, score: 1 }],
    },
  });
});
const { control } = result.current;

こんな感じでcontrol propsを作ってコンポーネントに渡せるのは結構便利。

defaultValueとかも自由に選択できるので、ドメイン情報いらない純粋にコンポーネントのテストができたので結構楽しかった。 ただ、MUIのチェックボックスがなぜか、デフォルト値を与えている場合にチェックしてこんな感じのアサーションを書いても動かなかった。

expect(checkbox1).not.toHaveAttribute("checked");

ずっとcheckされている状態になっていて、テストが通らなかったのでchatgptに聞いたところ、MUIとかそういうpropsで管理しているコンポーネントはpropertyを比較しろとのこと。

expect(checkbox2).toHaveProperty("checked", false);

実際toHavePropertyでやってみるとちゃんとテストが通ってた。 これは初見殺しすぎる。

元々検証のためにこのコード書いてたけど、そもそもなんでチェックが消えないのかは謎。 ちなみに、checkboxがdefault値を与えてチェックした状態で再度押すとチェックが消えないってバグが治ったかの検証をするためにテストは書いてた。

おそらくundefinedで更新していることが原因だと思うけど再現性がわからないから、今度codesandboxとかで再現するか作ってみたい。 から文字を渡すようにしたら治ったんだけど、なんで治ったのかは謎のまま。。