react-hook-form + @testing-library/react + Jest 어떻게 테스트 하지?

react-hook-form, Formik과 같은 Validation을 도와주는 라이브러리를 사용하는 경우,

Form Submit 자체를 비동기로 하기 때문에

테스팅 시에도 비동기로 테스트 해주어야한다.

// App.spec.tsximport { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

...

describe('test', () => {
    it('react-hook-form 테스트', async () => {
        const TestPage = () => {

            const { control } = useForm(...)

            return (
                <Controller
                    control={control}
                    name="time"
                    render={({field}) => {
                        return <Input {...field} />
                    }}
                />
            )
        }

        render(<TestPage />)

        const button = screen.getByTestId('test-buttons');

        fireEvent.click(button);
// Uncaught Error

        await waitFor(() => expect(button).toBeVisible())

    })
})