This video is available to students only

For our Field we will be testing each compound component to ensure that it applies the correct accessibility attributes.

Create Field tests#

First we need to create Field.spec.tsx with the following content:

If Jest is no longer running, start it in --watch mode.

Mocking custom hooks#

Our first test is asserting that a Field.Label component receives a unique ID applied as a for attribute. If we were to implement a test now, every render of the component would create a unique result for that ID. Let's test that by adding the following:

screen.debug() is a utility that will display the current DOM structure of the rendered test. Every time we save the test you can see the unique for value change. To help make our tests more predictable we will be creating a manual mock for the useUniqueID utility.

No discussions yet