Een foutmelding lezen

Een foutmelding is geen straf, maar een hint. De computer vertelt je wat er mis is, en vaak ook waar.

Waar zie je de foutmelding?

  • Terminal: waar je npm test hebt gedaan. Zoek naar het rode FAIL en de regel met ●

Zo pak je het aan

  1. Lees de eerste rode regel. Die zegt wat er mis is
  2. Zoek de bestandsnaam en het regelnummer, bijv. App.jsx:12. Daar zit de fout (of net een regel erboven)
  3. Zoek je foutmelding hieronder op

Tip: plak je foutmelding in de zoekbalk

Kopieer de rode regel en plak hem in de zoekbalk op het overzicht of op de homepage. Dan kom je direct bij de juiste uitleg.

jest-environment-jsdom cannot be found

Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

Wat betekent het? In jest.config.js staat testEnvironment: 'jsdom', maar het pakket daarvoor is niet geïnstalleerd.

npm install --save-dev jest-environment-jsdom

Cannot use import statement

Jest encountered an unexpected token ... SyntaxError: Cannot use import statement outside a module

Wat betekent het? Jest snapt je import of JSX niet. Babel is niet goed ingesteld.

  • Bestaat .babelrc in de hoofdmap van je project (met de punt ervoor)?
  • Staat er dit in?
{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

En zijn de packages geïnstalleerd?

npm install --save-dev @babel/preset-env @babel/preset-react babel-jest

Zie Jest Setup.

Fout bij importeren van CSS

Jest encountered an unexpected token ... SyntaxError: Unexpected token '.'

Wat betekent het? Je component importeert een CSS-bestand. Jest kan geen CSS lezen.

Check of dit in jest.config.js staat:

moduleNameMapper: {
  "\\.(css|less|scss|sass)$": "identity-obj-proxy",
},
npm install --save-dev identity-obj-proxy

document is not defined

ReferenceError: document is not defined

Wat betekent het? Jest draait je test zonder "nep-browser". Componenten testen heeft een browseromgeving nodig.

In jest.config.js:

testEnvironment: "jsdom",

En installeer het pakket: zie jest-environment-jsdom cannot be found.

toBeInTheDocument is not a function

TypeError: expect(...).toBeInTheDocument is not a function

Wat betekent het? De extra matchers van Testing Library zijn niet geladen.

Maak jest.setup.js in de hoofdmap:

import "@testing-library/jest-dom";

En verwijs ernaar in jest.config.js:

setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],

No tests found

No tests found, exiting with code 1

Wat betekent het? Jest kan geen testbestanden vinden.

Een testbestand moet eindigen op .test.js of .test.jsx:

Fout:

Button.js
ButtonTest.jsx
button.tests.jsx

Goed:

Button.test.jsx
som.test.js

Unable to find an element

TestingLibraryElementError: Unable to find an element with the text: Inloggen

Wat betekent het? Je test zoekt een element dat er niet is (of er anders uitziet).

  • Exacte tekst: "Inloggen" is niet "inloggen" of "Inloggen!"
  • Gebruik een regex om niet zo streng te zijn: screen.getByText(/inloggen/i)
  • Verschijnt het pas later (na een fetch of klik)? Gebruik await screen.findByText(...)
  • Kijk wat er wél op het scherm staat: screen.debug()

Found multiple elements

TestingLibraryElementError: Found multiple elements with the text: Verwijder

Wat betekent het? Er zijn meerdere elementen met die tekst, en getBy... verwacht er precies één.

// Alle knoppen pakken
const knoppen = screen.getAllByText("Verwijder");
expect(knoppen).toHaveLength(3);

// Of één specifieke, via rol en naam
screen.getByRole("button", { name: "Verwijder Appel" });

toBe op een object of array

expect(received).toBe(expected) // Object.is equality

If it should pass with deep equality, replace "toBe" with "toStrictEqual"

Wat betekent het? toBe checkt of het precies hetzelfde object is. Twee arrays met dezelfde inhoud zijn voor toBe toch verschillend.

Fout:

expect([1, 2, 3]).toBe([1, 2, 3]);

Goed:

expect([1, 2, 3]).toEqual([1, 2, 3]);

Zie Matchers.