Add the eslint-plugin-testing-library to app

[mountiny]

Problem: Lack of tools to help avoid common mistakes and bad practices in test files.

In project worked on by multiple developers, it can be difficult to follow best practices and avoid common mistakes when in comes to testing. Developers may miss important aspects like missing assertions, unused queries, or problematic testing patterns. Without proper tooling, it's challenging to maintain consistency and catch these errors early in the development process.

Solution:

Adding eslint-plugin-testing-library to ensure that developers follow recommended practices when writing tests with React Native Testing Library. This includes enforcing conventions, preventing common mistakes, and promoting readable and maintainable test code.

This library offers specific presets tailored for different testing libraries. For React Native Testing Library, we can utilize the React preset, ensuring that the rules are optimized for the nuances of testing in a React Native environment. This preset streamlines the configuration process, making it easy for teams to adopt eslint-plugin-testing-library without extensive setup overhead.

The plugin provides a set of rules that can be configured in ESLint configuration file. These rules cover various aspects of testing with RNTL, such as preferring specific query methods, enforcing async/await usage, discouraging direct DOM access, and more.

It is worth noting that this approach is recommended by RNTL maintainers: Maciej Jastrzębski on Twitter / X .

We could implement following rules:

'testing-library/await-async-queries': 'error',
'testing-library/await-async-utils': 'error',
'testing-library/no-debugging-utils': 'error',
'testing-library/no-manual-cleanup': 'error',
'testing-library/no-unnecessary-act': 'error',
'testing-library/prefer-find-by': 'error',
'testing-library/prefer-presence-queries': 'error',
'testing-library/prefer-screen-queries': 'error',

Setting the above rules will require updating 7 test files, which can be done along with adding the configuration.

cc @OlimpiaZurek

[melvin-bot]

Triggered auto assignment to @kevinksullivan (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[mountiny]

This is done now, no payments required