How to Test React Form Fields With Normalization Functions

[00:00 - 00:17] Testing the form field. The checkout form uses the form field components to render the inputs. The component renders a label, the input, and if we pass an error object to it, it will also render a paragraph with the error message.

[00:18 - 00:30] It also supports normalization. For example, if we pass the normalize function, it can limit the input length. Let's say we type in the CvV-1-2-3-4, and I can type any more symbols.

[00:31 - 00:44] Same with the card number, but now instead of limiting the length of this input , it breaks it into groups of four digits. 1-3-4, 1-3-4, 1-3-4. And as you can see, it adds a space between them.

[00:45 - 01:01] Create a new file, checkout, form, field, spec, tss. We describe the form field . We'll test that it renders correctly. With error, it renders the error message, and on change, it normalizes the input.

[01:02 - 01:20] Let's write the test for the renders correctly block. Render the form field and get the getByLabelText function. Const getByLabelText = render form field with label, foo label and name foo.

[01:21 - 01:33] Get the input using getByLabelText foo label. Check that it's in the document. Expect input to be in the document.

[01:34 - 01:53] Also check that the input doesn't have isError class. Expect input not to have class is error. And then check that it has the name attribute with value foo. Expect input to have attribute name foo.

[01:54 - 02:09] Now with the error, we'll surrender the form field. Now we'll also pass the errors object, errors message, example error. And then we expect here we want to get getByText instead of getByLabelText.

[02:10 - 02:32] That error example error is in the document. And then we test on change. Here we want to get the input const input getByLabelText foo label we fire a change event with target value test.

[02:33 - 02:47] And then we want to check the value of the value field of this input. Expect input value to equal test. Here we're getting a TypeScript error that the property value doesn't exist on type HTML element.

[02:48 - 02:57] That's because by default getByLabelText doesn't know that the element is an input. To fix it, we'll cast this element to HTML input element.

[02:58 - 03:18] And now the error should be gone. To test the normalization, we'll pass the normalize function. Normalize equals a function that receives value of type string and calls value to upper case. Now our test should expect that the input value will be equal upper case test.

[03:19 - 03:23] And the test is passing. Congratulations, you've just tested the form field component.