Donc les choses n’explosent pas au hasard lorsque vous lancez vos tests…

Quand j’ai vu Cypress pour la première fois , j’en ai été presque immédiatement amoureux. Cypress vous permet d'écrire (pas seulement) des tests d'intégration - vous savez, ces tests qui contrôlent le navigateur et cliquent dans votre application de navigateur pour agir comme un véritable utilisateur. Cypress possède de nombreuses fonctionnalités attrayantes qui devraient faciliter l'écriture des tests d'intégration par rapport à l'utilisation de Protractor et Selenium . Je vous laisse les vérifier par vous-même et vous amuser dans la documentation .

Quoi qu'il en soit, le seul vrai problème que j'ai rencontré lorsque j'ai commencé à écrire les tests est que vous ne pouvez pas utiliser Typescript . J'utilise Typescript depuis plus d'un an maintenant et je me suis habitué à la vérification de type et à la saisie semi-automatique que vous n'obtenez pas lorsque vous utilisez du Javascript simple. Ainsi, lorsque j'écrivais les premiers tests avec Cypress, j'avais ce sentiment étrange d'incertitude que quelque chose pourrait exploser lorsque je les exécuterais.

Récemment, j'ai découvert les typages Cypress et j'ai réussi à rendre les tests opérationnels avec Typescript. Ce court article concerne la configuration que j'utilise maintenant pour les tests.

Obtenir les saisies

Avant de pouvoir commencer à écrire vos tests dans Typescript, vous devez d'abord installer les saisies. Cypress regroupe de nombreux outils , donc si vous souhaitez les utiliser, vous devez également installer les saisies correspondantes.

yarn add @types/{cypress,chai,chai-jquery}

☝️ Depuis la version 1.1.3 de Cypress, les typages Cypress sont fournis par défaut avec la bibliothèque, il n'est donc pas nécessaire d'en ajouter @types/cypressséparément.

Configuration de la construction

Cypress ne prend pas encore en charge les fichiers Typescript, nous devons donc configurer un système de construction simple pour créer les fichiers de test et laisser Cypress exécuter les fichiers Javascript résultants. Vous pouvez utiliser une solution plus complexe comme Webpack ou Gulp , mais j'ai opté pour une solution très simple consistant simplement à utiliser le compilateur Typescript appelé tscqui est installé lorsque vous installez Typescript. Alors allez-y et faites-le maintenant.

yarn add typescript

tsc --watch --project test/tsconfig.json

Vous spécifiez les fichiers à compiler à l'aide des includeoptions et la sortie à l'aide de l' compilerOptions.outDiroption. Notez que j'ai désactivé les fichiers de carte source et c'est parce que Cypress essaierait également de les exécuter en tant que tests.

Configuration du cyprès

D'accord. Vos fichiers de test sont maintenant en cours de compilation. La dernière chose à faire est de dire à Cypress où les chercher. Pour ce faire, vous devez modifier le cypress.jsonfichier de configuration :

Vous transmettez le chemin vers les tests compilés en utilisant l' integrationFolderoption. Et voilà !

Emballer

Vous disposez désormais d’une configuration fonctionnelle pour compiler les tests et les exécuter à l’aide de Cypress. J'utilise des scripts NPM pour exécuter l'ensemble de la configuration et voici à quoi ils ressemblent. Il vous suffit d'installer une dépendance supplémentaire.

yarn add npm-run-all
    
      

Merci de lire cet article. Si vous l'aimez, assurez-vous de lui donner un et suivez-moi pour d'autres cadeaux géniaux. Passe une bonne journée!