<div id="readability-page-1" class="page"><div>
                <div id="SE-2a45bcb7-1354-4a69-8658-1808c8cc6470">
                            <p id="SE-7c5518bf-f517-4ffe-97cd-55b76b02179a"><span id="SE-3b7b5bc2-b3e2-4fd2-8074-3c2748285ac5">이번 글에서는 Vitest에 react-hook-form을 적용하는 방법을 알아보겠습니다. 간단한 작업이니 빠르게 지나가 볼게요. 먼저 react-hook-form 관련 패키지를 설치합니다.</span></p>
                        </div>                <div id="SE-59c03339-588c-4479-a2c5-1f6cd89b7930">
                                    <p>yarn add react-hook-form yup @hookform/resolvers</p>
                                </div>                <div id="SE-a891950e-95e8-48c8-84c1-80d65fe3dda7">
                                    <p id="SE-00767b46-8a33-4112-907d-90bde8c5f62e"><span id="SE-96744ad6-490b-44e1-b599-f2d723114185">​</span></p><p id="SE-65f9cd4d-4c97-4692-adc3-9ac698b7a31b"><span id="SE-3279ee84-3f6c-457d-a134-8ac49f8b0d08">이제 useForm, useFormContext를 사용하여 간단한 로그인 페이지를 구현합니다. </span></p>
                            </div>                <div id="SE-86770108-fef2-490a-8819-845ebcd07b6d">
                                    <p>// src/app/page.tsx
'use client'

import {FormProvider, useForm, useFormContext} from "react-hook-form";
import {useState} from "react";

export const LoginForm = () =&gt; {
    const [isLogin, setLogin] = useState(false);
    const {register, handleSubmit, formState: { errors }} = useFormContext();

    const onSubmit = (data) =&gt; {
        if (data.email &amp;&amp; data.password) {
            setLogin(true);
        } else {
            setLogin(false);
        }
    }

    return (
        &lt;div&gt;
            &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
                &lt;input
                    type="email"
                    placeholder='이메일'
                    {...register("email", { required: "이메일은 필수 정보입니다." })}
                /&gt;
                {errors.email &amp;&amp; &lt;span&gt;{errors.email.message}&lt;/span&gt;}
                &lt;input
                    type="password"
                    placeholder='비밀번호'
                    {...register("password", { required: "비밀번호는 필수 정보입니다." })}
                /&gt;
                {errors.password &amp;&amp; &lt;span&gt;{errors.password.message}&lt;/span&gt;}
                &lt;button type='submit'&gt;제출&lt;/button&gt;
            &lt;/form&gt;
            {isLogin &amp;&amp; &lt;h2&gt;로그인되었습니다.&lt;/h2&gt;}
        &lt;/div&gt;
    )
}

const Page = () =&gt; {
    const form = useForm()

    return (
        &lt;FormProvider {...form}&gt;
            &lt;LoginForm/&gt;
        &lt;/FormProvider&gt;
    );
};

export default Page;</p>
                                </div>                <div id="SE-22e20a42-9568-4716-a579-e7bef9b53307">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-22e20a42-9568-4716-a579-e7bef9b53307&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDRfMzYg/MDAxNzIyNzY5ODI0MzQy.8lIo-ZcAMa-O_DIe-nhk6KbIiuwumi9Xl-obwGLU-AQg.C-iRcX8f4-zufKpYnqcb7ebInqaM21bXGQgk5e2iZpAg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-04_%EC%98%A4%ED%9B%84_8.10.06.png&quot;, &quot;originalWidth&quot; : &quot;1800&quot;, &quot;originalHeight&quot; : &quot;204&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDRfMzYg/MDAxNzIyNzY5ODI0MzQy.8lIo-ZcAMa-O_DIe-nhk6KbIiuwumi9Xl-obwGLU-AQg.C-iRcX8f4-zufKpYnqcb7ebInqaM21bXGQgk5e2iZpAg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-04_%EC%98%A4%ED%9B%84_8.10.06.png?type=w800" data-width="886" data-height="100" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-10f3f27f-1c77-47c5-a4a6-1efbff458348">
                                    <p id="SE-0ad5d2b4-5cd9-4017-8e2b-0e6af26a665d"><span id="SE-0c0ec2f4-58d1-4d26-bc81-88f54ed8c31f">​</span></p><p id="SE-da5f37c0-ddb7-401b-97fc-5651e897c17b"><span id="SE-204adde8-396e-47ad-8a35-bf8ad11c371a">이제 테스트 코드를 작성해 보겠습니다. LoginForm 컴포넌트는 FormProvider 안에 항상 담겨 있어야 정상적으로 테스트가 가능합니다. 테스트 파일에 TestForm을 생성하고 FormProvider을 추가하여 다음과 같이 작성합니다.</span></p><p id="SE-b60d4c8d-0eec-4ac5-a144-2351a8400758"><span id="SE-d1c55823-a8ae-4e85-a1dd-86ad373b45ea">​</span></p><p id="SE-b019040f-f906-490f-9fc9-04c35dcc4355"><span id="SE-d6029965-0efd-4d94-836d-02c45867934a">현재는 로그인 정보를 기입한 경우와 이메일, 패스워드 둘 다 입력하지 않은 경우에 대한 테스트 코드만 작성된 상태입니다. 이것을 좀 더 세분화하면 이메일만 입력하지 않은 경우, 비밀번호만 입력하지 않은 경우, 둘 다 입력하지 않은 경우로 구분하여 테스트 코드를 작성할 수도 있습니다.</span></p>
                            </div>                <div id="SE-635b11ef-6964-4e82-a107-7183047e6e83">
                                    <p>import { afterEach, beforeEach, describe, expect, it } from "vitest";
import { LoginForm } from "@/app/page";
import { cleanup, render } from "@testing-library/react";
import { FormProvider, useForm } from "react-hook-form";
import { screen } from "@testing-library/dom";
import userEvent from "@testing-library/user-event";

const TestForm = () =&gt; {
    const form = useForm({
        defaultValues: {
            email: '',
            password: ''
        }
    });

    return (
        &lt;FormProvider {...form}&gt;
            &lt;LoginForm /&gt;
        &lt;/FormProvider&gt;
    );
};

describe("LoginForm", () =&gt; {
    beforeEach(() =&gt; {
        render(&lt;TestForm /&gt;);
    });

    afterEach(() =&gt; {
        cleanup();
    });

    it('로그인 정보를 입력합니다.', async () =&gt; {
        const emailInput = screen.getByPlaceholderText('이메일');
        const passwordInput = screen.getByPlaceholderText('비밀번호');
        const submitButton = screen.getByText('제출');

        await userEvent.type(emailInput, 'test@gmail.com');
        await userEvent.type(passwordInput, 'test1234');
        await userEvent.click(submitButton);

        const loginMessage = await screen.findByText('로그인되었습니다.');
        expect(loginMessage).toBeInTheDocument();
    });

    it('이메일, 비밀번호를 입력하지 않으면 "필수 정보입니다." 문구가 출력됩니다.', async () =&gt; {
        const emailInput = screen.getByPlaceholderText('이메일');
        const passwordInput = screen.getByPlaceholderText('비밀번호');
        const submitButton = screen.getByText('제출');

        await userEvent.clear(emailInput);
        await userEvent.clear(passwordInput);
        await userEvent.click(submitButton);

        const emailError = await screen.findByText('이메일은 필수 정보입니다.');
        const passwordError = await screen.findByText('비밀번호는 필수 정보입니다.');
        expect(emailError).toBeInTheDocument();
        expect(passwordError).toBeInTheDocument();
    });
});
</p>
                                </div>                <div id="SE-345e687c-957e-4916-a4b8-5e5ad8785e86">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-345e687c-957e-4916-a4b8-5e5ad8785e86&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDRfOTIg/MDAxNzIyNzcwMTUzNTE1.TYY6iKxyJrl9gXzltv2Ea79TgZaAVh09k5M83QQbqzAg.KiHGRD3q14CP-4Dh0-qweL9mgXiat0lwvQkjNGIZ0Lcg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-04_%EC%98%A4%ED%9B%84_8.15.10.png&quot;, &quot;originalWidth&quot; : &quot;2078&quot;, &quot;originalHeight&quot; : &quot;700&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDRfOTIg/MDAxNzIyNzcwMTUzNTE1.TYY6iKxyJrl9gXzltv2Ea79TgZaAVh09k5M83QQbqzAg.KiHGRD3q14CP-4Dh0-qweL9mgXiat0lwvQkjNGIZ0Lcg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-04_%EC%98%A4%ED%9B%84_8.15.10.png?type=w800" data-width="886" data-height="298" alt="">
                                    </a>
                                </p>
                        </div>
                    </div></div>

개발하는 기획자. 기획하는 개발자.

이번 글에서는 Vitest에 react-hook-form을 적용하는 방법을 알아보겠습니다. 간단한 작업이니 빠르게 지나가 볼게요. 먼저 react-hook-form 관련 패키지를 설치합니다. 이제 useForm, useFormContext를 사용하여 간단한 로그인 페이지를 구현합니다. 이제 테스트 코드를 작성해 보겠습니다. LoginForm 컴포넌트는 FormProvider 안에 항상 담겨 있어야 정상적으로 테스트가 가능합니다. 테스트 파일에 TestForm을 생성하고 FormProvider을 추가하여 다음과 같이 작성합니다. 현재는 로그인 정보를 기입한 경우와 이메일, 패스워드 둘 다 입력하지 않은 경우에 대한 테스트 코드만 작성된 상태입니다. 이것을 좀 더 세분화하면 이메일만 입력하지.......

Vitest react-hook-form 적용

댓글