How to simulate user interactions like typing in Jest's tests
userEvent is a part of the Testing Library that provides a more advanced and flexible way to simulate user interactions like typing in JavaScript tests.
In this video I'm showing a quick way to type text in an input using userEvent.
In this video I'm showing a quick way to type text in an input using userEvent.
Category
🦄
CreativityTranscript
00:00Testing library is a library for testing user interfaces in JavaScript applications.
00:10It can be integrated with multiple testing frameworks.
00:16For example, I'm using it with Rust.
00:21In this video, I want to show how I'm simulating user interaction like typing to fill a form input in Next.js.
00:36This can be useful, for example, to test the form validation.
00:43For this test case, I'm using the UserEvent utility of the testing library to create a user object to trigger interactions.
01:10Next, I'm rendering the login form with the render function and providers.
01:26I'm using the screen function of the testing library to select the email input by placeholder.
01:56And I'm using the user object to simulate the typing to fill this email.
02:10Finally, in my test, I'm using the email input to verify if it has this email.
02:27Let's run a test.
02:39And the test is passed as expected.
02:58And this means the value was filled.
03:09Let's run a test.
03:14And the test is passed as expected.