Testing Material UI Forms with React-Testing-Library

Test cases can be difficult to write when dealing with forms. I have found this especially difficult with my preferred UI library: Material UI. I love the components, design, and its seamless use with React, but when it comes to testing it can be difficult.

Below I'm going to show an example of an account delete request form I recently built and how I wrote my test cases.

I use jest + react-testing-library in my testing stack.

First, the form
The form itself was simple. A text field, checkbox, and submit button.
When the form loads the text field is empty and the checkbox is unchecked.
The submit button is disabled when the text field is empty or the checkbox is unchecked.

My goal was to write tests for the different states the UI can be in

1. password empty, checkbox unchecked, button disabled
2. password filled, checkbox unchecked, button disabled
3. password empty, checkbox checked, button disabled
4. password filled, checkbox checked, button enabled

The code version of the form

example

A Few Things to Point Out

• My TextFields have the data-testid set on the inputProps object, rather than the outer TextField. This will allow me to more easily manipulate the value of the TextField.

• I'm importing the extended-expect dependency so I can use the toHaveClass check.

import "@testing-library/jest-dom/extend-expect"
expect(submit).toHaveClass("Mui-disabled");

I've found that class checks are the simplest way to test the state of some Material UI elements.

Below is the full test suite for the form. I'll spend the rest of the article going over each it block.

example

Default view
I like to include tests that make sure everything is as I expect it to be once the component is first rendered.

example

Password Only
Next, I make sure the button is disabled when only the password field has a value.

example

Confirm Only
Now, I do the same for an empty password and a checked checkbox

example

Enabled Submit
Finally, I check that the button is enabled when both the password and the checkbox are filled in.

example

Once all my tests are passing, I'm good to move onto the next feature.