Skrive tester

Testverktøy

Vi benytter en kombinasjon av testverktøy for å sikre kvaliteten på vår applikasjon og komponenter.

I packages/design-react benytter vi oss av:

• vitest: Dette er Vites integrerte testkjører.
• @testing-library/jest-dom: Forenkler testskriving med nyttige DOM-assertions.
• @testing-library/react: Gir verktøy for å rendre React-komponenter, søke i DOM-en og interagere med den.
• jest-axe: Integrerer med Jest for å utføre tilgjengelighetssjekker ved hjelp av axe-core biblioteket.

Her er et eksempel på en enkel test:

describe("<Heading />", () => {
  const testContent = "Test Heading";

  it("renders with given content", () => {
    render(<Heading size="md">{testContent}</Heading>);
    const headingElement = screen.queryByText(testContent);
    expect(headingElement).toBeVisible();
  });
});

Tilgjengelighetstesting

Automatiske tester

For tilgjengelighetstesting i packages/design-react bruker vi jest-axe. Den kan identifisere manglende DOM-verdier, som for eksempel en manglende alt-tag i <img />. Her er et eksempel på test av et Heading-komponent:

import { screen, render } from "@testing-library/react";
import { axe } from "jest-axe";
import { Heading } from "./heading";

describe("<Heading />", () => {
  it("is accessible", async () => {
    const { container } = render(
      <Heading size="md">Accessibility Test</Heading>
    );
    expect(await axe(container)).toHaveNoViolations();
  });
)};

jest-axe kjører i jsdom for packages/design-react. Der kan den identifisere manglende DOM-verdier, men kan ikke teste for fargekontrast og layoutdetaljer.

For å pålitelig teste fargekontrast og andre stilrelaterte tilgjengelighetshensyn, må man kjøre tester i en faktisk nettleser.

Her på dokumentasjonsløsningen, i apps/docs, bruker vi Cypress kombinert med cypress-axe for å teste andre tilgjengelighetsproblemer. cypress-axe kan oppdage problemer som for lav fargekontrast eller en forvirrende sidestruktur.

Her er et eksempel på en enkelt sjekk av tilgjengelighet med Cypress:

it("visit homepage and check a11y", () => {
  cy.visit("/");
  cy.injectAxe(); // injectAxe must happen after a visit and before checka11y.
  cy.checkA11y();
});

Manuelle tester

Gjennomsnittlig klarer axe å oppdage halvparten av tilgjengelighetsproblemer. Derfor er det viktig å også teste tilgjengelighet på andre måter, som bruk av skjermlesere, tastaturnavigasjon, forstørrelsesverktøy og brukertesting.