s14 cours

14.Tester une application React 14.1. Que tester dans une application React ? Sur une application front-end, qu’elle soit en React ou non, la question se pose régulièrement de savoir quoi tester unitairement. En effet, si l’on prend par exemple un composant qui n’est responsable que de présentation en générant du HTML, il serait laborieux de tester précisément le rendu du composant dans le navigateur. De plus, il est possible que le moindre changement dans le CSS associé au composant change le rendu au point de mettre le test en échec, ce qui n’est généralement pas le but.

14.2. Test unitaire de composants avec Enzyme Enzyme est un utilitaire de test JavaScript permettant de tester facilement les composants React. Il aide à rendre les composants React en mode test.

Pour démarrer avec Enzyme, installez-le via npm avec la commande suivante. npm install --save-dev enzyme npm install --save-dev enzyme-adapter-react-16 --force Rédaction du premier cas de test Étape 1 : Nous allons rendre un simple bouton nommé Click Me en utilisant le code suivant.

import React, { Component } from 'react'; import './App.css'; class App extends React.Component { constructor(props) { super(props); this.state = {};

Étape 2 : Ajoutez le code suivant dans le fichier App.test.js, qui est le fichier dans lequel nous écrivons les cas de test. import React from 'react' import Enzyme, { shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import App from './App' Enzyme.configure({ adapter: new Adapter() }) describe('Test Case For App', () => { it('should render button', () => { const wrapper = shallow(<App />) const buttonElement = wrapper.find('#ClickMe'); expect(buttonElement).toHaveLength(1); expect(buttonElement.text()).toEqual('Click Me');

Étape 3 : Utilisez la commande suivante pour exécuter les scénarios de test. npm test Les résultats du test seront affichés comme dans la capture d’écran suivante.