My Testing Skills and Experience

How and what to test?

I often hear the question, "How and what should I test?" from developers who lack extensive experience with testing. I understand this mindset perfectly, as I was in the same place a few years ago. Here, I'll describe my general approach to testing.

1. Unit Testing

I aim to test small, reusable functions (utils) with simple unit tests. These tests are easy to write and maintain. If you use Copilot in your IDE, small unit tests can be entirely generated by AI since they involve simple input and output.

2. Component Testing

When testing components, I focus entirely on functionality without testing implementation details. I mock as little as possible. My approach is to always test components with complex logic (e.g., user status components with different statuses) in dedicated tests to ensure each state is handled properly. Then, the interaction of these previously tested components with other components can be tested in another integration test without needing to test all possible states.

3. End-to-End Testing

At the end of the testing process, I perform end-to-end tests. Here, I mostly test happy paths along with error states. The goal is to ensure that the front-end and back-end connect properly in the application. Some complex UI logic, such as drag and drop or scrolling, is also perfect to test in end-to-end tests.

Jest

I started learning testing with Jest in 2020, and since then, I have used this library in multiple projects. Jest is a very handy tool for writing unit tests. Along with React Testing Library, it can be very powerful for testing UI logic. I have extensive experience using Jest in various projects, utilizing it for both unit and integration tests. Jest is also great for mocking and performing other types of complex setups needed to run tests.

Vitest

I've been using Vitest since the end of 2023 and like it very much. There are several things I appreciate about it: Vitest is very fast - of course, speed depends on various circumstances, but it generally seems much faster than Jest in most cases. Another reason I like it is that Vitest has a very smart built-in watching mode, as well as TypeScript and JSX support. In my private projects, I use only Vitest.

React Testing Library

I've been using React Testing Library (RTL) for testing UI components since 2021 and find this tool very powerful. RTL focuses on testing user interactions with the interface without delving into implementation details. With RTL's provided selectors, which allow you to get elements by their accessible roles, testing UI has become much more meaningful to me. I am confident that what I test with RTL accurately reflects real user interactions with the web application.

Cypress

I've been working with Cypress since 2022. I've used both the page object approach and the non-page object approach. Additionally, I have integrated the Cypress Testing Library plugin to enable testing library queries. This integration makes writing tests more intuitive and aligns with how users interact with the application.

Playwright

I have been writing end-to-end tests using Playwright since the end of 2023. There are several aspects I like the most about this testing tool: Playwright's syntax is more readable to me, and it provides selectors aligned with accessibility, such as roles, which makes interactions with the UI in tests very intuitive. Additionally, Playwright offers very detailed error logs, which are crucial for writing and debugging tests.