Skip to content

some example frontend tests with jest and react testing library

Remco Tukker requested to merge feature/frontend-tests into develop

A simple Jest and React Testing Library setup to evaluate.

Added dependencies:

  • "jest" the testing framework
  • "@types/jest" to let typescript know of Jest types without having to add imports
  • "jest-transform-stub" Jest runs without webpack, which means that imports of css and image files don't work. This library is used to stub these files out in the config
  • "babel-jest" to use babel on the test tsx files (I think this is only some config but Im not sure)
  • "cross-fetch" fetch polyfill for nodejs
  • "jest-environment-jsdom" this allows setting "testEnvironment": "jsdom" in the config which is necessary to do DOM testing with React Testing Library
  • "@testing-library/react" the React Testing Library that renders the React components in a DOM
  • "@testing-library/jest-dom: helper functions for dealing with the DOM
  • "@testing-library/user-event" helper functions for simulating clicks etc

The bundle is updated because some library versions were updated.

The fetch calls are currently mocked, but this should be replaced with the Mock Service Worker library which spins up a small server to return the required data so that the fetch mock can be replaced.

Example tests:

  • a test that renders the app landing page
  • a test that renders the app landing page and clicks through to the data page
  • a test that renders the ColorBadge component and uses Jest's snapshot functionality to show any changes in the rendered DOM
Edited by Remco Tukker

Merge request reports