Skip to main content
Version: 3.0.0

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.

Supported input types

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([]);
    });
  });
});
Fixture names

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.