React

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

milliwonkim 2023. 3. 1. 18:32
반응형
SMALL

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

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

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

// App.spec.tsx

import { 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())
        
    })
})
반응형
LIST