Depuis plus de deux décennies, l’automatisation des tests aide les équipes de développement de logiciels à réduire la charge de travail et, par conséquent, la pression sur le temps et les ressources que subissent les équipes, en particulier lorsqu’elles sont dans une frénésie de publication. Les tests automatisés contribuent non seulement à accélérer les boucles de test et de rétroaction, mais augmentent également le retour sur investissement des tests et permettent ainsi à l’entreprise de réaliser des économies.
24 % des répondants à l’enquête sur Internet affirment avoir constaté un retour sur leur investissement dans l’automatisation des tests au cours des six premiers mois. L’automatisation des tests est un point de départ si votre entreprise subit un effort de transformation/modernisation numérique.
Les tests automatisés sont une étape cruciale dans le processus de développement logiciel car ils permettent de s’assurer que les modifications de code n’entraînent pas de régressions ou de nouveaux défauts. Dans cet article, nous couvrirons de nombreuses techniques de test automatisées qui peuvent être appliquées aux applications React Native.
Tests unitaires
L’écriture de tests brefs et isolés pour reproduire des scénarios particuliers du code est connue sous le nom de tests unitaires (appelés «unités»). Vous pouvez automatiser ces tests pour vous assurer que chaque unité fonctionne correctement.
Vous pouvez utiliser un framework de test comme Jest pour créer des tests unitaires pour une application React Native. Jest est une option très appréciée pour les applications React car elle est rapide, simple et possède une riche bibliothèque de moqueries.
Voici un exemple de test unitaire simple pour une fonction qui additionne deux nombres :
import { add } from './math';
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
Utilisez la commande jest pour exécuter ce test. Jest recherchera automatiquement les fichiers de test (c’est-à-dire les fichiers dont les noms correspondent à *.test.js ou *.spec.js) et exécutera tous les tests trouvés.
Les tests unitaires aident à tester des morceaux de code distincts, mais ils ne peuvent pas évaluer comment les différents morceaux de code interagissent. Il serait préférable que vous utilisiez des tests d’intégration pour cela.
Tests d’intégration
Les tests d’intégration examinent comment divers éléments de code interagissent les uns avec les autres. Le test d’éléments tels que les flux de données, les appels d’API et les interactions de l’interface utilisateur peut bénéficier de cette approche.
Les tests d’intégration dans React Native impliquent l’utilisation d’une bibliothèque telle que react-test-renderer ou enzyme pour rendre un composant React Native et faire des assertions sur la sortie.
Voici un exemple de la manière dont vous pourriez écrire un test d’intégration pour un composant Button simple à l’aide de react-test-renderer :
import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';
it('renders correctly', () => {
const tree = renderer.create(<Button>Click me</Button>).toJSON(); expect(tree).toMatchSnapshot();
});
Ce test affichera le composant Button et capturera un instantané de sortie. L’instantané sera enregistré dans un fichier et utilisé pour comparer les résultats des futurs tests. Cette pratique garantit que le composant n’est pas modifié de manière inattendue après la prochaine version.
Vous pouvez également utiliser la bibliothèque react-test-renderer pour manipuler le composant rendu et faire des assertions sur son état et son comportement. Par exemple, vous pouvez simuler une pression sur un bouton et vous assurer que l’action correcte est exécutée :
import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';
it('dispatches action on press', () => {
const mockPressAction = jest.fn();
const component = renderer.create(<Button onPress={mockPressAction}>Click me</Button>);
component.root.findByType(Button).props.onPress();
expect(mockPressAction).toHaveBeenCalled();
});
En appelant le prop onPress, ce test restituera le composant Button et simulera un événement de presse. Il utilisera ensuite jest.fn() pour créer une fonction fictive qui suit si elle a été appelée et fait une affirmation qu’elle l’a été.
Vous pouvez également utiliser une bibliothèque, telle qu’une enzyme, pour manipuler le composant rendu et faire des assertions sur son comportement.
Test de bout en bout
Les tests de bout en bout impliquent l’évaluation de l’unité complète du produit logiciel comme le ferait un utilisateur, du début à la fin. Cette approche peut aider à évaluer les performances, la gestion des erreurs et l’ensemble du flux de l’application.
Vous pouvez utiliser une bibliothèque comme Detox pour créer des tests de bout en bout pour un projet React Native. Avec l’aide de l’outil de désintoxication de l’outil de test de la boîte grise, vous pouvez créer des tests qui interagissent avec l’application de la même manière qu’un utilisateur le ferait. Il examine l’état de l’application et vérifie que les actions anticipées ont été exécutées à l’aide du débogueur natif React.
Un exemple de test de bout en bout qui vérifie le flux de connexion est fourni ici :
describe('Login flow', () => {
beforeEach(async () => {
await device.reloadReactNative();
});
it('should allow the user to login', async () => {
await expect(element(by.id('username'))).toBeVisible();
await element(by.id('username')).typeText('user1');
await element(by.id('password')).typeText('pass1');
await element(by.id('login-button')).tap();
await expect(element(by.text('Welcome!'))).toBeVisible();
});
});
Vous devez lancer le React Native Debugger et exécuter la commande detox test pour exécuter ce test. Le lancement de l’application, l’exécution des tests et la vérification que les mesures prévues ont été prises sont tous effectués par Detox.
Les tests de bout en bout aident à vérifier comment l’ensemble de l’application agit comme un produit fini, mais ils peuvent être longs à exécuter et difficiles à gérer. En règle générale, il est préférable d’utiliser une combinaison de tests d’intégration et unitaires plutôt que de créer une suite de tests complète de bout en bout ou de les utiliser uniquement lorsque cela est nécessaire. Par exemple, lorsque vous souhaitez examiner les performances dans un cas où vous avez besoin d’avoir des temps de réponse rapides à l’interaction de l’utilisateur.
Conclusion
Cet article a couvert plusieurs méthodes de test automatisées pour les projets React Native, y compris les tests unitaires, les tests d’intégration et les tests de bout en bout. Chaque méthode présente des avantages et des inconvénients, et vos besoins et exigences spécifiques détermineront la meilleure approche.
En combinant ces méthodes de test, vous pouvez vous assurer que votre code fonctionne correctement et que votre application est stable et fiable. À long terme, cela peut vous faire gagner du temps et des efforts tout en vous permettant d’augmenter la qualité de vos applications.