An introduction to Unit Testing ?

There is no set of rules that determines the answer to this question (which was personally difficult for me), but in this article I would like to give you some guidelines to help you get started with unit testing.
When creating test cases, it is worth keeping in mind how user interfaces will be used by users, and further testing for maintainability.

What to test ?

Unit testing in the context of front-end development involves testing individual components or features of the user interface to ensure that they work as expected. Here are some aspects to consider when deciding what to test in front-end unit testing:

• Component rendering whether the component renders correctly with the props, or without them if they are not mandatory, as it will render without them.

• Edge cases test your components with extreme or unexpected input to ensure they handle edge cases gracefully.

• Component behaviour test the interaction and behaviour of your components. For example, if you have a button that triggers an action, make sure it behaves as expected when clicked. Check state changes in response to user interaction.

• State management if your front-end relies on state management (e.g. with React's state or Redux), test that the state updates as expected. Verify that the UI responds appropriately to state changes.

• DOM manipulation if your components manipulate the DOM directly, test that these manipulations are correct.

Best Practices for Writing Tests.

Write descriptive names. Write clear and descriptive names for your test cases. This makes it easy for developers to understand the purpose of each test.

Test one separated unit of working code. Try to find the smallest but autonomous peace of code. In the case of the front end, it includes: all the user interactions with our front end layer, such as clicks, double clicks, submit ,focus ,typing , etc.

Test Driven Development approach. As I mentioned before, it is essential to test small peace of code, but if you start your implementation from test? this way of writing unit test helps you at the beginning to ensure that your code is designed in accordance with business need expentations, help you remember about every case that should be considered. From my own experience, I see that it is easier to 'mock' dependencies for testing witch at the begaing of your path can be challenging.

Mock External Dependencies. Isolate your unit tests by using mocks or stubs for external dependencies such as API calls or services. This allows you to focus on testing the specific functionality of the component without relying on the entire system.

Selective coverage in real time for writing unit tests is limited due to the business pressure to finish development faster, so our role is to organise the work to maintain high quality code and ensure it is delivered on time. My recommendation is to start testing from the Javascript code and then move on to the visual aspect. This way we cover the functional part of the application and protect the critical business logic.

Do not test implementation details its key role due to writing unit test, because in case of possible refactoring of code, which is something common in development of application, the tests related to implementation would be needed to be changed, resulting in generating tons of additional work.

Best Practices for Writing Tests with React Testing Library.

The general guidelines above also apply to writing unit tests using the React Testing Library however it worthy to exdends thiis rules about RTL philosophy.

Accesibility RTL provides queries, such as getByRole or getByText, that allow you to select elements based on their role or text content, which is essential for verifying that the correct information is being presented to users. Below i present hierarchy of using RTL queries.

// getByRole()
// getByLabelText()
// getByText()
// getByDisplayValue()
// getByTitle()
// getByTestId()( when text is dynamic)

Why in that order ? The RTL creators correctly point out that getByTestId, which is related to the DOM, is irrelevant to the user.

Real-world usability testing should reflect user interaction with the application as closely as possible.

Summary

The overall goal is to facilitate the creation of effective tests that reflect real-world usage and ensure the reliability of application components.
Writing unit tests is key to maintaining high code quality, but we should remember that aiming for 100% coverage may not be the best solution. Focus on the most important functionality.

In the next article, we'll look at the practicalities of writing your first unit tests. We'll guide you through the process of creating tests for simple components using the React Testing Library (RTL), a popular testing tool in the React ecosystem.