【Next.js】React Testing LibraryでFormの入力値のテストをする

React Testing LibraryでFormの入力値が正しいかテストする方法です。

toBeやtoHaveValueで値が取得できると思っていましたができなかったので備忘録です。

"use client";

import { useForm, SubmitHandler } from "react-hook-form";

type SampleForm = {
  sampleName: string;
};

const Sample = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SampleForm>({
    defaultValues: {
      sampleName: "sampleValue",
    },
  });

  const onSubmit = (data: SampleForm) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} data-testid="test-form">
      <input type="text" {...register("sampleName")} />;
    </form>
  );
};

export default Sample;

import Sample from "@/components/Sample";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";

describe("Sample", () => {
  it("textbox", () => {
    render(<Sample />);
    expect(screen.getByTestId("test-form")).toHaveFormValues({
      sampleName: "sampleValue",
    });
  });
});

toHaveFormValuesを使用してテキストボックスsampleNameの初期値がsampleValueであることのテストができました！

↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！