Tests React.js - Historique des versions

Abdoulaye le 6 février 2024 à 12:38

2024-02-06T12:38:10Z

← Version précédente		Version du 6 février 2024 à 12:38
Ligne 1 :		Ligne 1 :
	Les tests en React.js sont généralement effectués à l'aide de bibliothèques de test telles que Jest et React Testing Library. Jest est un framework de test JavaScript populaire, et React Testing Library est spécifiquement conçu pour tester les composants React. Voici les étapes de base pour écrire des tests en React.js :		Les tests en React.js sont généralement effectués à l'aide de bibliothèques de test telles que Jest et React Testing Library. Jest est un framework de test JavaScript populaire, et React Testing Library est spécifiquement conçu pour tester les composants React. Voici les étapes de base pour écrire des tests en React.js:

	=== Étape 1: Configuration de Jest ===		=== Étape 1: Configuration de Jest ===
	Assurez-vous que votre projet React a Jest installé. Si ce n'est pas le cas, vous pouvez l'installer avec la commande suivante :<syntaxhighlight lang="bash">		Assurez-vous que votre projet React a Jest installé. Si ce n'est pas le cas, vous pouvez l'installer avec la commande suivante:<syntaxhighlight lang="bash">
	npm install --save-dev jest		npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
	</syntaxhighlight>Créez ou assurez-vous que vous avez un fichier de configuration Jest (<code>jest.config.js</code>) à la racine de votre projet. Vous pouvez utiliser une configuration minimale comme celle-ci :<syntaxhighlight lang="js" line="1">		</syntaxhighlight>Créez ou assurez-vous que vous avez un fichier de configuration Jest (<code>jest.config.js</code>) à la racine de votre projet. Vous pouvez utiliser une configuration minimale comme celle-ci :<syntaxhighlight lang="js" line="1">
	module.exports = {		module.exports = {
	testEnvironment: 'jsdom',		testEnvironment: 'jsdom',
	testMatch: ['/__tests__//.js?(x)', '/?(.)+(spec\|test).js?(x)'],		transform: {
	setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],		'^.+\\.jsx?$': 'babel-jest',
			'\\.(jpg\|jpeg\|png\|gif\|eot\|otf\|webp\|svg\|ttf\|woff\|woff2\|mp4\|webm\|wav\|mp3\|m4a\|aac\|oga)$':
			'<rootDir>/fileTransformer.js',
			},
			moduleNameMapper: {
			"\\.(css\|less\|scss\|sass)$": "identity-obj-proxy"
			},
			//testMatch: ['/__tests__//.js?(x)', '/?(.)+(spec\|test).js?(x)'],
			setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
			};

			</syntaxhighlight>Créer un fichier <code>babel.config.js</code> à la racine du projet également: <syntaxhighlight lang="js" line="1">
			module.exports = {
			presets: [
			'@babel/preset-env',
			['@babel/preset-react', {runtime: 'automatic'}],
			],
	};		};
	</syntaxhighlight>		</syntaxhighlight>

	=== Étape 2: ~~Configuration de React Testing Library~~ ===		=== Étape 2: Créer le transformer des fichiers spéciaux ===
	~~Installez React Testing Library et Jest-dom~~, ~~qui fournit des utilitaires pour tester des composants React~~ :<syntaxhighlight lang="~~bash~~">		Nous aurons besoin d'un transformer pour gérer les fichiers spéciaux comme les images, vidéos, fonts etc. Pour cela créer un fichier <code>fileTransformer.js</code> à la racine du projet :<syntaxhighlight lang="js" line="1">
	~~npm install --save-dev @testing-library/react @testing-library/jest-dom~~		const path = require('path');

			module.exports = {
			process(sourceText, sourcePath, options) {
			return {
			code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
			};
			},
			};
	</syntaxhighlight>		</syntaxhighlight>

Ligne 55 :		Ligne 79 :
	Ces étapes de base vous permettront de commencer à écrire des tests pour vos composants React en utilisant Jest et React Testing Library. Vous pouvez ensuite explorer des sujets plus avancés tels que les tests asynchrones, les tests de comportement, etc. selon les besoins de votre application.		Ces étapes de base vous permettront de commencer à écrire des tests pour vos composants React en utilisant Jest et React Testing Library. Vous pouvez ensuite explorer des sujets plus avancés tels que les tests asynchrones, les tests de comportement, etc. selon les besoins de votre application.

	[[~~Category~~:React]]		[[index.php?title=Catégorie:React]]

Abdoulaye : Abdoulaye a déplacé la page Créer et lancer des tests en react.js vers Tests React.js

2024-02-06T10:05:52Z

Abdoulaye a déplacé la page Créer et lancer des tests en react.js vers Tests React.js

← Version précédente	Version du 6 février 2024 à 10:05
(Aucune différence)

Abdoulaye le 6 février 2024 à 10:04

2024-02-06T10:04:11Z

← Version précédente		Version du 6 février 2024 à 10:04
Ligne 54 :		Ligne 54 :

	Ces étapes de base vous permettront de commencer à écrire des tests pour vos composants React en utilisant Jest et React Testing Library. Vous pouvez ensuite explorer des sujets plus avancés tels que les tests asynchrones, les tests de comportement, etc. selon les besoins de votre application.		Ces étapes de base vous permettront de commencer à écrire des tests pour vos composants React en utilisant Jest et React Testing Library. Vous pouvez ensuite explorer des sujets plus avancés tels que les tests asynchrones, les tests de comportement, etc. selon les besoins de votre application.

			[[Category:React]]

Abdoulaye : Initial

2024-02-06T10:03:29Z

Initial

Nouvelle page

Les tests en React.js sont généralement effectués à l'aide de bibliothèques de test telles que Jest et React Testing Library. Jest est un framework de test JavaScript populaire, et React Testing Library est spécifiquement conçu pour tester les composants React. Voici les étapes de base pour écrire des tests en React.js :

=== Étape 1: Configuration de Jest ===
Assurez-vous que votre projet React a Jest installé. Si ce n'est pas le cas, vous pouvez l'installer avec la commande suivante :<syntaxhighlight lang="bash">
npm install --save-dev jest
</syntaxhighlight>Créez ou assurez-vous que vous avez un fichier de configuration Jest (<code>jest.config.js</code>) à la racine de votre projet. Vous pouvez utiliser une configuration minimale comme celle-ci :<syntaxhighlight lang="js" line="1">
module.exports = {
testEnvironment: 'jsdom',
testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'],
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};
</syntaxhighlight>

=== Étape 2: Configuration de React Testing Library ===
Installez React Testing Library et Jest-dom, qui fournit des utilitaires pour tester des composants React :<syntaxhighlight lang="bash">
npm install --save-dev @testing-library/react @testing-library/jest-dom
</syntaxhighlight>

=== Étape 3: Écrire des Tests ===
Créez un dossier <code>__tests__</code> à côté de vos composants React, et écrivez des fichiers de test avec l'extension <code>.test.js</code> ou <code>.spec.js</code>. Par exemple, pour tester un composant <code>MyComponent.js</code> :<syntaxhighlight lang="js" line="1">
// MyComponent.js

import React from 'react';

const MyComponent = ({ message }) => {
return <div>{message}</div>;
};

export default MyComponent;

</syntaxhighlight><syntaxhighlight lang="js" line="1">
// MyComponent.test.js

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'; // Pour des assertions spécifiques à Jest-dom
import MyComponent from './MyComponent';

test('renders MyComponent with a message', () => {
render(<MyComponent message="Hello, World!" />);
expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

</syntaxhighlight>

=== Étape 4: Exécuter les Tests ===
Ajoutez une commande <code>test</code> dans votre fichier <code>package.json</code> :<syntaxhighlight lang="js" line="1">
"scripts": {
"test": "jest"
}
</syntaxhighlight>Exécutez les tests avec la commande :<syntaxhighlight lang="bash">
npm test
</syntaxhighlight>Cela lancera Jest et exécutera les tests que vous avez écrits.

Ces étapes de base vous permettront de commencer à écrire des tests pour vos composants React en utilisant Jest et React Testing Library. Vous pouvez ensuite explorer des sujets plus avancés tels que les tests asynchrones, les tests de comportement, etc. selon les besoins de votre application.

Tests React.js - Historique des versions

Abdoulaye le 6 février 2024 à 12:38

Abdoulaye : Abdoulaye a déplacé la page Créer et lancer des tests en react.js vers Tests React.js

Abdoulaye le 6 février 2024 à 10:04

Abdoulaye : Initial

Abdoulaye : Abdoulaye a déplacé la page Créer et lancer des tests en react.js vers Tests React.js

Abdoulaye : Initial