Guides

How to write tests

En viktig bit av utviklingen er å skrive tester. Her er en rask guide til hvordan du kan skrive tester i Spor.

Hvordan tester vi?

Vi bruker Vitest, Testing Library og Axe til å teste koden i Spor. Det er en flott kombinasjon, som gjør det enkelt å skrive universelt utformet kode. Om du ikke har brukt disse verktøyene før, anbefaler vi å ta en rask titt på dokumentasjonen til de respektive bibliotekene.

For å skrive din første test, finn litt kode du vil teste – f.eks. Button.tsx – og lag en ny fil Button.test.tsx i samme mappe. Så kan du lime inn dette (eller skrive det selv, selvfølgelig):

import { act, render } from "@testing-library/react";
import React from "react";
import { axe } from "vitest-axe";

describe("<Button />", () => {
  it("", async () => {
    // TODO: Skriv test!
  });
});

Et enkelt test-eksempel

En enkel test av en knapp kan være noe slikt:

import { vi } from "vitest";
import { act, render } from "@testing-library/react";
import React from "react";
import { axe } from "vitest-axe";

describe("<Button />", () => {
  it("works like a button", async () => {
    const handleClick = vi.fn();
    const { container, getByRole } = render(
      <Button variant="primary" onClick={handleClick}>
        Click me
      </Button>
    );
    getByRole("button").click();
    expect(handleClick).toHaveBeenCalled();
  });
});

Hva med Axe?

Axe er et verktøy for å sjekke at koden din er universelt utformet. Her er et eksempel på hvordan du kan teste nettopp det:

it("is accessible", async () => {
  const { container } = render(<Button variant="primary">Click me</Button>);
  expect(await axe(container)).toHaveNoViolations();
});

Det kan være smart å kjøre denne expect-en flere ganger i samme test, i forskjellige states etc.

Testetips!

Det å verifisere at koden din er universelt utformet er vanskelig – selv med verktøyene du får fra aXe, er det fortsatt bare 20 % av bugs du klarer å fange. Husk å test koden din nøye, både med skjermleser og andre virkemidler.

Hvor mye burde jeg teste?

Testing er vel og bra, men det er ingen poeng i å ha full testdekning. Det kommer til å komme i veien for refaktorering og skape mer trøbbel enn det er verdt.

Istedenfor anbefaler vi at du skriver få, men brede tester som sjekker mesteparten av de viktigste kodeveiene med få linjer test.

Hvordan legger jeg til støtte for testing i pakker som ikke har det?

Enn så lenge har ikke alle pakker støtte for testing. Her er et eksempel på hvordan du kan legge det til.