Testing With Jest
The AudioEye Accessibility Testing SDK Jest Library gives you the ability to write Jest tests to test components of your project.
Pre-requisites
Visit the Getting Started page to learn how to setup Jest in your project.
Note: This guide's Jest test examples use
@testing-library/react
. Please follow their setup
instructions, particularly the differences between Jest versions.
Jest 28 introduced breaking changes to the testing
environment that need to be handled correctly. You can find more information on how to do that
here.
Usage
Import the SDK into your test file, render your component, and then use the SDK to test for accessibility issues.
Here's an example using React components and the React Testing Library.
For convenience, this the SDK supports passing in an HTMLElement
, a string
, a DocumentFragment
, a
JQuery<HTMLElement>
, or a RenderResult
.
import { accessibility } from '@audioeye/testing-sdk-jest';
import { render } from '@testing-library/react';
import React from 'react';
import { Image } from './image';
describe('Image', () => {
describe('Image with poor alt text', () => {
it('can test with `RenderResult`', () => {
expect(accessibility.evaluate(render(<Image altText="image" />)).resultCodes).toEqual(['Img_Name_WeakName']);
});
it('can test with `HTMLElement`', () => {
const { container } = render(<Image altText="image" />);
expect(accessibility.evaluate(container).resultCodes).toEqual(['Img_Name_WeakName']);
});
it('can test with `DocumentFragment`', () => {
const { asFragment } = render(<Image altText="image" />);
expect(accessibility.evaluate(asFragment()).resultCodes).toEqual(['Img_Name_WeakName']);
});
});
describe('Image with good alt text', () => {
it('can test with `RenderResult`', () => {
expect(accessibility.evaluate(render(<Image altText="The AudioEye company logo" />)).resultCodes).toEqual([]);
});
});
});
We provide helper functions named accessibility
and a11y
which can be used interchangeably.
SDK API
evaluate
Test the accessibility of a component using the evaluate
function.
const accessibilityResults = accessibility.evaluate(render(<Image altText="image" />));
Parameters
› expectSource (string | RenderResult | HTMLElement | DocumentFragment | JQuery<HTMLElement>)
The source to evaluate.
Returns
evaluate
returns a Class of type A11yResults
.
A11yResults
API
conformanceLevel
Filter the accessibility results by the conformance level. The conformance level can be 'A', 'AA', or 'AAA'. Higher conformance levels include all lower conformance levels.
const results = accessibilityResults.conformanceLevel('AA');
Parameters
› level (String)
The conformance level to filter the results by. Either A
, AA
, or AAA
.
Returns
A new instance of A11yResults
.
resultCodes
Get the result codes for the accessibility results as a string array.
const resultCodes = accessibilityResults.resultCodes;
// ['Img_Name_WeakName']
Returns
An array of strings representing the result codes.
resultsGroupedByWcagSuccessCriteriaLevel
Group the accessibility results grouped by the WCAG success criteria level.
accessibilityResults.resultsGroupedByWcagSuccessCriteriaLevel();
// {A: [ ... ], AA: [ ... ], AAA: [ ... ]}
Returns
An object with the test results grouped by WCAG success criteria level.