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
であることのテストができました!
↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです!