Formik by InterTuts - Dailymotion

Formik is a popular open-source library for building forms in React and Next.js applications. This playlist collects tuts for Formik.

Transcript

00:00In this video, I will show how I'm testing the validation for this form

00:15using the testing library and Jest

00:21I need to get this message in my test if the password is short

00:31Testing library is a library for testing user interfaces in JavaScript applications

00:42It can be integrated with multiple testing frameworks

00:47For example, I'm using it with Jest

00:54I want to show how I'm simulating user interaction

01:02like typing and click to fill the form inputs in Next.js and submit the form

01:15This is my test case

01:19First, I'm using the UserEvent utility of the testing library

01:29to create a user object to trigger interactions

01:37Here I have a custom render function

01:43which uses the same testing library

01:52but with providers used in my application

02:00Then, I'm using the Screen utility of the testing library

02:11to get the email, password and login button from the login form

02:30Next, I'm using the user object to type the email and a short password

02:46Then, I'm verifying if the email was filled and the password

02:57Here I'm using the click method to submit the form

03:07Finally, I'm verifying if the error for validation exists

03:16Let's run a test

03:26The test is passed and this means the validation is working