{"id":18932,"date":"2022-09-19T21:00:00","date_gmt":"2022-09-20T04:00:00","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=18932"},"modified":"2023-02-03T06:14:35","modified_gmt":"2023-02-03T14:14:35","slug":"utiliser-le-test-avec-la-reaction","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/fr\/resources\/docs\/unit-testing\/using-jest-with-react\/","title":{"rendered":"Utilisation de Jest avec React"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Mise en place de la biblioth\u00e8que de tests Jest + React dans un environnement d'entretien<\/h2>\n\n\n\n<p>Dans les environnements Interview React, nous utilisons Vite comme bundler et serveur de d\u00e9veloppement pour votre projet React. Nous avons choisi Vite pour sa configuration simple, son support TypeScript pr\u00eat \u00e0 l'emploi et le rechargement \u00e0 chaud des modules. Malheureusement, l'int\u00e9gration entre Vite et Jest est toujours en cours.<\/p>\n\n\n\n<p>Pour utiliser Jest dans votre projet React, nous vous sugg\u00e9rons d'utiliser Babel pour transpiler votre code. L'approche que nous recommandons est largement emprunt\u00e9e \u00e0 <a href=\"https:\/\/egghead.io\/lessons\/jest-adding-jest-with-typescript-support-to-a-vite-application\" target=\"_blank\" rel=\"noopener\">ce cours de Egghead.io<\/a>. Dans cet exemple, nous allons \u00e9galement installer <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener\">Biblioth\u00e8que de test pour React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00e9pendances NPM<\/h2>\n\n\n\n<p>Tout d'abord, vous devrez installer plusieurs d\u00e9pendances de dev :<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># D\u00e9pendances Babel<\/span>\nnpm install -D @babel\/preset-env @babel\/preset-react @babel\/preset-typescript\n\n<span class=\"hljs-comment\">D\u00e9pendances de la biblioth\u00e8que de tests #<\/span>\nnpm install -D @testing-library\/react @testing-library\/jest-dom @testing-library\/user-event\n\n<span class=\"hljs-comment\">D\u00e9pendances de Jest #<\/span>\nnpm install -D jest jest-environnement-jsdom<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Langage du code :<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Configuration de Babel<\/h2>\n\n\n\n<p>Ajouter un fichier de configuration Babel \u00e0 la racine du projet appel\u00e9 <code>babel.config.js<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">module<\/span>.exports = {\n \u00a0<span class=\"hljs-attr\">pr\u00e9s\u00e9lections<\/span>: &#91;\n \u00a0 \u00a0<span class=\"hljs-string\">\"@babel\/preset-env<\/span>,\n \u00a0  &#91;<span class=\"hljs-string\">\"@babel\/preset-react\".<\/span>, {<span class=\"hljs-attr\">temps de fonctionnement<\/span>: <span class=\"hljs-string\">automatique<\/span>}],\n  ],\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Langage du code :<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Configuration de Jest<\/h2>\n\n\n\n<p>Enfin, ajoutez un fichier de configuration Jest et un fichier de configuration \u00e0 la racine du projet appel\u00e9 <code>jest.config.js<\/code> frustrent <code>jest.setup.js<\/code>respectivement.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ jest.config.js<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n \u00a0<span class=\"hljs-attr\">clearMocks<\/span>: <span class=\"hljs-literal\">true<\/span>,\n \u00a0<span class=\"hljs-attr\">environnement de test<\/span>: <span class=\"hljs-string\">\"jsdom\"<\/span>,\n \u00a0<span class=\"hljs-attr\">setupFilesAfterEnv<\/span>: &#91;\n \u00a0 \u00a0<span class=\"hljs-string\">\"\/jest.setup.ts\"<\/span>\n  ],\n \u00a0<span class=\"hljs-attr\">moduleNameMapper<\/span>: {\n \u00a0 \u00a0<span class=\"hljs-string\">\"\\.(css|moins)$\"<\/span>: <span class=\"hljs-string\">\"identit\u00e9-obj-proxy\"<\/span>\n  }\n}\n<span class=\"hljs-comment\">\/\/ jest.setup.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\"@testing-library\/jest-dom\"<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Langage du code :<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u00c0 ce stade, vous pouvez ajouter npm \u00e0 vos scripts pour ex\u00e9cuter Jest.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Dans package.json<\/span>\n<span class=\"hljs-string\">\"scripts\"<\/span>: {\n \u00a0<span class=\"hljs-string\">\"test\"<\/span>: <span class=\"hljs-string\">\"jest\"<\/span>,\n \u00a0<span class=\"hljs-string\">\"test:watch\"<\/span>: <span class=\"hljs-string\">\"jest --watchAll\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Langage du code :<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Maintenant, vous pouvez ex\u00e9cuter <code>npm run test<\/code> ou <code>npm run test:watch<\/code> dans le shell interactif pour ex\u00e9cuter les tests unitaires dans votre projet React.<\/p>\n\n\n\n<p>Vous pouvez le tester dans le bac \u00e0 sable ci-dessous :<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed\"\n\tstyle=\"padding-top: 85%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=226041\" width=\"640\" height=\"544\" loading=\"lazy\" aria-label=\"Essayez le bac \u00e0 sable CoderPad\"><\/iframe>\n<\/div>","protected":false},"parent":26440,"menu_order":1,"template":"","class_list":["post-18932","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/18932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":11,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/18932\/revisions"}],"predecessor-version":[{"id":30141,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/18932\/revisions\/30141"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/26440"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/media?parent=18932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}