This content originally appeared on DEV Community and was authored by Md Atikur Rahman
In this blog, we will learn how to test a React application using the userEvent and testing-library. We will test a UserForm component that has two input fields for a username and email and a submit button. We will test the input fields and the submit button."
*tags: ["React", "Testing", "userEvent", "testing-library"] *
In this blog, we will learn how to test a React application using the userEvent and testing-library. We will test a UserForm component that has two input fields for a username and email and a submit button. We will test the input fields and the submit button.
First, let's import the necessary libraries and components
:
Next, let's write a test to check the rendering of the UserForm component:
test('renders UserForm component', () => {
render(<UserForm />);
const button = screen.getByText('Submit');
expect(button).toBeInTheDocument();
});
Now, let's write a test to check the input fields and the submit button:
test('test using data-testid', () => {
const handleUserAdd = jest.fn();
render(<UserForm onUserAdd={handleUserAdd} />);
const username = screen.getByTestId('username');
const email = screen.getByTestId('email');
fireEvent.change(username, { target: { value: 'Atik' } });
fireEvent.change(email, { target: { value: 'atiksujon7@gmail.com' } });
expect(username.value).toBe('Atik');
expect(email.value).toBe('atiksujon7@gmail.com');
const submit = screen.getByRole('button');
fireEvent.click(submit);
expect(handleUserAdd).toHaveBeenCalledTimes(1);
});
In the above test, we first render the UserForm component and then get the username and email input fields using their test-ids. We simulate typing in the fields and then click the submit button. We check if the onUserAdd function has been called once.
Finally, let's write another test using keyboard and click:
test('test using keyboard and click', () => {
const handleUserAdd = jest.fn();
render(<UserForm onUserAdd={handleUserAdd} />);
const [nameInput, emailInput] = screen.getAllByRole('text box');
userEvent.click(nameInput);
userEvent.keyboard('Rahman');
userEvent.click(emailInput);
userEvent.keyboard('atiksujon7@gmail.com');
const submitButton = screen.getByText('Submit');
userEvent.click(submitButton);
expect(handleUserAdd).toHaveBeenCalledTimes(1);
});
In this test, we use the userEvent library to simulate user interactions. We first click on the name input field and then type 'Rahman' using the keyboard method. We do the same for the email input field. After typing, we click the submit button. We check if the onUserAdd function has been called once.
In conclusion, we have successfully tested a React application using the userEvent and testing-library. We tested the input fields and the submit button of a UserForm component.
This content originally appeared on DEV Community and was authored by Md Atikur Rahman
Md Atikur Rahman | Sciencx (2024-10-07T16:17:24+00:00) React Testing with UserEvent and Testing Library. Retrieved from https://www.scien.cx/2024/10/07/react-testing-with-userevent-and-testing-library/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.