Dernière partie de la série! Cette fois, nous allons rendre notre page adaptée aux mobiles et effectuer des tests avec notre front-end React en utilisant Enzyme & Jest.

Vous avez manqué la troisième partie? Assurez-vous de lire cela avant d'aller de l'avant.

Site Web adaptatif

Tous les appareils ont été créés différemment. En avril 2021, l'écran d'ordinateur le plus utilisé est un 1920x1080. L'année dernière, la part du trafic pendant la pandémie a été consacrée aux appareils mobiles qui ont généralement une taille et une résolution d'affichage réduites. Tout récemment, des smartphones dotés de capacités à double écran sont également entrés sur le marché. Nous devons être conscients des appareils utilisés et de la façon dont cela peut potentiellement avoir un impact sur la façon dont notre site Web est consulté par l'utilisateur. Heureusement, TailwindCSS a un utilitaire pour cela.

Nous pouvons configurer des points d'arrêt en fonction des tailles d'affichage pour répondre à tous les appareils. Tout d'abord, vous devrez configurer votre fichier tailwind.config.js pour ajouter des tailles d'écran spécifiques. Actuellement, je l'ai configuré comme ceci:

J'ai inclus des résolutions allant de la largeur de 640 pixels d'un Pixel 2 à un moniteur d'affichage d'une largeur de 1920 pixels. Nous pourrons utiliser ces points d'arrêt pour contrôler l'apparence de notre front-end sur mobile.

Actuellement, nous utilisons une grille dans notre section Info. Pour le moment, nous ne contrôlons pas à quoi cela ressemble sur les petits appareils. Si nous ne changeons pas cela, nos cases de grille se chevaucheront et ressembleront à ceci:

Nous pouvons changer à quoi cela ressemble en spécifiant à quoi nous voulons que la grille ressemble à chaque point d'arrêt. Voici à quoi ressemblera notre code:

Sur les fenêtres plus grandes, nous aurons une vue de grille horizontale en utilisant grid-cols-3. Sur des écrans plus petits, nous passerons à une vue de grille verticale à l'aide de grid-cols-1.

Enzyme avec Jest Testing

Nous utiliserons Enzyme et Jest pour tester notre front-end. Nous installerons les dépendances Enzyme (au cas où vous ne l'auriez pas encore fait) en utilisant cette ligne:

npm i --save-dev enzyme enzyme-adapter-react-16

Ensuite, nous allons configurer notre adaptateur à partir de la bibliothèque Enzyme dans notre fichier setupTests.js.

Notre fichier App.test.js contiendra nos tests. Nous importerons notre bibliothèque de tests depuis React et Enzyme, puis les composants que nous utiliserons pour les tests. Testons le rendu de nos composants, en commençant par App et Nav.

Nous vérifions si le composant App et Nav sera rendu. Nous exécuterons les tests en utilisant:

npm run test

Testons le rendu du composant Nav et attendons-lui de rendre également les liens de la barre de navigation. Nous allons également tester notre composant Hero pour voir s'il rend contenant notre image src.

Si cela est fait correctement, les tests devraient tous réussir!

La même chose peut être faite pour les prochains composants qui nécessitent des tests, le code final devrait donc ressembler à ceci:

Si vous souhaitez ajouter plus de tests, c'est définitivement faisable. Comme il contient principalement des tests de rendu de composants, il est assez simple de s'y attaquer. Une fois que vous aurez commencé à tester la logique des composants, les tests sembleront plus complexes.

Ceci conclut ma série sur la création d'une application React.js et sa mise en forme avec TailwindCSS! J'inclurai quelques liens de ressources ci-dessous et un lien vers le dépôt qui inclura la démo.

Liens de projet

• Git Repo

• LinkedIn
• GitHub
• Twitter
• Instagram
• Youtube

Ressources

• Documentation TailwindCSS
• Documentation enzymatique
• Documentation plaisanterie
• Documentation React.js