How to Build Accessibility Tests For React Field Components

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Building a Company Component Library

  • [00:00 - 00:12] For our field, we will be testing each compound component to ensure that it applies the correct accessibility attributes. First, we need to create a new spec file for our field.

    [00:13 - 00:28] So under fields, we'll create a new fill.spec.tsx. And similar to button, we're going to include a describe block for our field and each of the elements that are within it.

    [00:29 - 00:38] And we're going to be asserting that the ID is provided correctly. So let's get just running again with MP and run test with the watch fly.

    [00:39 - 00:49] So we'll keep up with any for us. And our first test is going to be asserting that the label component receives a unique ID applied as a for attribute.

    [00:50 - 01:05] And if we were to implement this right now, we're actually going to run into an issue where every render of the component will create a unique result for that ID. And that can be difficult for us to test against in an environment like just on where we want it to be a reproducible effect each time.

    [01:06 - 01:20] So let's start by actually rendering a field with a field out label with dinner . And we'll just call this label for now.

    [01:21 - 01:34] And then for us to look at what DOM is produced from this, we can call a screen debug. And this will provide it in our console.

    [01:35 - 01:48] And here you can see a unique ID generator for the for attribute, which is good for a browser. But if we were to run this again, we will see a different unique value applied, which can make testing difficult for us.

    [01:49 - 02:04] So to help make our test more predictable, we're going to be creating a manual mock for the use unique ID utility. So we can do that in just by going to our utils folder, and creating a new folder called underscore underscore mocks.

    [02:05 - 02:15] And then to more underscores after that. And we're going to name this the same file name that we use for use unique ID.

    [02:16 - 02:37] And here we're able to return our use unique ID utility, which will be a string . But this time we're actually going to just return a non unique ID, just a constant string to make sure that it is applied correctly.

    [02:38 - 02:59] And for this, we also need to call within our field.spec, we need to adjust our mock utils use unique ID. And now we should see that unique ID provided for the for attribute.

    [03:00 - 03:16] There we go. So now what we can do is do an assertion. We want to get from our screen a new thing that the text of label.

    [03:17 - 03:40] And we want to assert that that has an attribute on the for attribute of unique ID. And once that passes, we can do something similar for the input and texture components.

    [03:41 - 03:51] So include one for input. And then for these elements, rec test and library includes some different helpers that we're able to use.

    [03:52 - 04:10] So for this one, we can use get by label text, which will look at the label with the text of input and find the relevant input for it. And we want to assert that that has an attribute, then put of ID.

    [04:11 - 04:25] That is unique ID. And if that passes, we want to do the same thing for text area as well. So text area.

    [04:26 - 04:41] And that should also have an ID that is equal to unique ID. So with these tests, we now have coverage of all of the custom functionality that we provide across all of the components.

    [04:42 - 04:56] So we have a couple of different types of things. We are going to be creating a tree shape build process with Roland JS for our components.