React Native Testing Structure

How to build a testing structure in React Native projects?

Test automation

Is the use of software to control the execution of software tests through the application of strategies and tools, comparing the expected results with actual results. Its objectives are reduction of human involvement in manual activities, time demand, and cost for the project.

Testing Coverage

When developers build a technology application, like a website or mobile app, there are shapes to ensure that the application runs like must be. One of the most effective resources for this object is automatic tests, which are codes that test the application. There are many types of testing, that can test the own code, an external resource that the application depends on, or simulate the final users, clicking on buttons, scrolling down the pages, and other events. It’s possible, for example, to build an automatic report with the final results of these tests and really ensure that the app does what the users wait for.

So, Testing Coverage is relative a how much a code (or application) is covered by automatic tests. For, example, I can say that an application has 100% of coverage testing, so, I’m saying that runs perfectly like must be and there aren’t bugs in this app. Is this really true? I don’t know.

There are many ways to say how much a code or application is covered by automatic testing. One of the most common (in my experience and knowledge) is the final number export of automatic test tools. Many tools and libraries export a number to define the Testing coverage. So, a developer can say “I have x% of testing coverage in my code”, but the question is: How is reflect the reality of the code (and most, about the product)? In this post, I’ll discuss a little about this.

Types of Automatic Tests

* There are more types, but this is the most common in front-end development

Unit tests

They are responsible for ensuring the operation of small pieces of code, and units, like:

  • Functions
  • Logic
  • Snapshots
  • Rendering a component

Integrations tests

Created to ensure that small units have the expected behavior working together, for example:

  • Click on the registration button;
  • Feedback from a form;

Tests end-to-end

Responsible for testing the complete application flow, simulating a user:

  • Run in the browser;
  • Consume more resources;

Extra: Mutation Tests

Mutation testing involves introducing small, intentional changes (mutations) to the code to simulate errors. The goal is to see if existing tests can detect these changes. If the tests fail, they are considered effective; if not, the tests may need improvement. This helps ensure test coverage and robustness.

Tests Pyramid

What are the main types of automated tests and how are they organized?

The test pyramid represents how tests are organized in a project. The closer to the base of the pyramid, the simpler the tests and the easier the tests to run. The higher a test type is on the pyramid, the more expensive the theses are in runtime and configuration. Therefore, the idea is to have a huge test coverage in the unit tests (which constitute the base of the pyramid). For the other types of tests, it is necessary to evaluate the main scenarios to be tested for each level of the pyramid.

It is worth mentioning that in several front-end development libraries, such as React Testing Library and Enzyme, unit tests and integration tests are written using the same library, and, in general, in these projects, both types of tests are understood to be from the same level of the pyramid.

Libraries recommended

The main libraries to use in React Native projects are:

  • Jest: to javascript unit tests.
  • React Native Testing Library: used to build unit and integration tests in React Native components. It’s similar to the React Testing Library library.
  • Detox: used to test end-to-end projects on React Native available to android and iOS platforms.

Note: This post was originally published on Medium. See:
https://medium.com/@marialuisacp/react-native-testing-structure-ea8946858639

Publicar comentário