Demo project for my frontend testing talk

For some reason, we still don't like writing test for web-frontends. Most backend developers do it, frontend devs often don't. And if they do, they get frustrated. But what can we do?

This repo contains the demo application for my talk about frontend testing, with examples that I use in the talk. You can have a look and try out things with this repo.

It is not intended to be a fully tested, working and deployable apps. It is an example for project setup and unit testing. Please do not copy & paste without thinking. Use this as inspiration only.

Mock-Service-Worker

This was not part of the talk. In order to simplify the use of mock-apis, we write a small wrapper around mswjs.io.

• In setup.ts, the file mock-api.test-helper.ts is included, which initializes a default mock api
• Default mocks for all endpoint should be provided in the setup function
• The function useRequestHandlers can be used to override the default request handlers for specific test cases.
• src/test-utils/mock-requestHandlers contains the factory functions for request-handlers, simplifying the override in test-cases. Maybe it would be better to move it so src/backend.
• The mock-api.test-helper module also collects sent requests and exports the function getSentRequests so that api-calls can be verified in the test. This is a very basic facility, which could be improved, but for this repo, I wanted to keep it simple.

Other References

• "Coding a better world together", by Rabobank: Six 90 minutes presentations with Robert C. Martin about various topics.
  • Demo of test driven development in that series
• https://testing-library.com/
  • Types of quries
  • User events
  • pointerEventsCheck config option
• Icons of this demo app: https://uxwing.com/
• My old talk from 2021 about mocking, with React examples
  • Note that this talk uses an old mock-service-worker version, and jest+webpack
  • Example repo
  • Youtube video