How to test Formik validation using Jest and Testing Library
Formik is a popular open-source library that simplifies the process of managing form state, validation, and submission.
This video shows an approach to test the Formik's form validation using Jest and Testing Library.
This video shows an approach to test the Formik's form validation using Jest and Testing Library.
Category
🦄
CreativityTranscript
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