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 available tests to test for accessibility issues.

Here's an example using React components and the React Testing Library.

import "@audioeye/testing-sdk-jest";

import { render, RenderResult } from "@testing-library/react";
import React from "react";

import { Image } from "./image";

describe("Image", () => {
  describe("Image WITHOUT alt text", () => {
    it("should render successfully", () => {
      const {
        container: { innerHTML },
      } = render(<Image />);
      expect(innerHTML).toMatchSnapshot();
    });

    it("can test with render result and it should find accessibility issues", () => {
      expect(render(<Image />)).toFindAccessibilityIssues();
    });

    it("can test with container and it should have an imgTextAlt issue", () => {
      const { container } = render(<Image />);
      expect(container).toOnlyHaveTheseAccessibilityIssues(
        "Img_Name_Missing"
      );
    });

    it("can test with fragment and it should match the snapshot", () => {
      const { asFragment } = render(<Image />);
      expect(asFragment()).toMatchAccessibilityReportSnapshot();
    });
  });

  describe("Image WITH alt text", () => {
    it("should render successfully", () => {
      const {
        container: { innerHTML },
      } = render(<Image altText="The AudioEye company logo" />);
      expect(innerHTML).toMatchSnapshot();
    });

    it("should not have accessibility issues", () => {
      expect(
        render(<Image altText="The AudioEye company logo" />)
      ).not.toFindAccessibilityIssues();
    });
  });
});

Available Tests

toFindAccessibilityIssues

Use .toFindAccessibilityIssues when checking if a component has accessibility issues.

it('expect to find an accessibility issues when no alt-text is passed to component', () => {
  expect(render(<Image />)).toFindAccessibilityIssues();
});

it('should not have accessibility issues when a good alt-text is passed in', () => {
  expect(render(<Image altText="Company Logo" />)).not.toFindAccessibilityIssues();
});

toOnlyHaveTheseAccessibilityIssues

Use .toOnlyHaveTheseAccessibilityIssues when checking if a component has exactly the same issues as those expected. Pass a comma separated list of expected test names.

it('expect to find an accessibility issues when no alt-text is passed to component', () => {
  expect(render(<Image />)).toOnlyHaveTheseAccessibilityIssues('Img_Name_Missing');
});

toFindTheseAccessibilityIssues

Use .toFindTheseAccessibilityIssues when checking if a component's accessibility issues includes the issues expected. Pass a comma separated list of expected test names.

it('expect to find an alt-text accessibility issue when no alt-text is passed to component', () => {
  const { container } = render(<Image />);
  expect(container).toFindTheseAccessibilityIssues('Img_Name_Missing');
});

it('expect to not find an alt-text accessibility issue when an alt-text is passed to component', () => {
  const { container } = render(<Image altText="Company Logo" />);
  expect(container).not.toFindTheseAccessibilityIssues('Img_Name_Missing');
});

toMatchAccessibilityReportSnapshot

Use .toMatchAccessibilityReportSnapshot to take a snapshot of the accessibility report and compare it to the previously stored snapshot.

it('expect match snapshot when a good alt-text is passed to component', () => {
  expect(render(<Image altText="Company Logo" />)).toMatchAccessibilityReportSnapshot();
});