{"id":72760,"date":"2023-09-13T10:40:17","date_gmt":"2023-09-13T09:40:17","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=72760&#038;preview=true&#038;preview_id=72760"},"modified":"2023-09-28T12:21:07","modified_gmt":"2023-09-28T11:21:07","slug":"tester-applications-jest","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/","title":{"rendered":"Comment tester vos applications avec Jest"},"content":{"rendered":"<p>Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/outils-test-performances\/\">tests<\/a> de logiciels sont essentiels pour garantir que vos applications fonctionnent comme pr\u00e9vu, en particulier lorsque vous introduisez des changements. La d\u00e9tection et la correction des erreurs d\u00e8s le d\u00e9but du d\u00e9veloppement sont cruciales pour maintenir un code r\u00e9sistant et de haute qualit\u00e9.<\/p>\n<p>Parmi les nombreux outils et frameworks disponibles pour les tests JavaScript, Jest est l&rsquo;un des plus populaires. Produit par Meta, Jest offre des capacit\u00e9s de test \u00e9tendues pour les applications JavaScript et celles construites avec des frameworks JavaScript.<\/p>\n<p>Nous allons explorer le framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l&rsquo;int\u00e9grer dans votre flux de d\u00e9veloppement.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce que Jest ?<\/h2>\n<p><a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> est un framework flexible et simple \u00e0 utiliser. En plus de ses fonctionnalit\u00e9s principales de test JavaScript, il offre des configurations et des extensions pour tester les applications Babel, webpack, Vite, Parcel ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-complet-typescript\/\">TypeScript<\/a>.<\/p>\n<p>Jest a \u00e9t\u00e9 largement adopt\u00e9 par les d\u00e9veloppeurs et dispose d&rsquo;un large \u00e9ventail d&rsquo;extensions d\u00e9velopp\u00e9es et maintenues par la communaut\u00e9. Il se distingue par sa facilit\u00e9 d&rsquo;utilisation : Les tests JavaScript ne n\u00e9cessitent aucune configuration ou extension suppl\u00e9mentaire. Mais vous pouvez \u00e9galement effectuer des tests plus avanc\u00e9s &#8211; comme les tests de <a href=\"https:\/\/kinsta.com\/fr\/sujets\/frameworks-javascript\/\">frameworks JavaScript<\/a> &#8211; en utilisant quelques options de configuration suppl\u00e9mentaires.<\/p>\n<h2>Comment configurer Jest pour votre projet JavaScript<\/h2>\n<p>Voyons comment configurer Jest dans un projet JavaScript existant.<\/p>\n<h3>Pr\u00e9-requis<\/h3>\n<p>Pour suivre ce tutoriel, assurez-vous d&rsquo;avoir les \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> est install\u00e9.<\/li>\n<li>npm (qui fait d\u00e9j\u00e0 partie de Node.js) ou <a href=\"https:\/\/classic.yarnpkg.com\/lang\/en\/docs\/install\/#windows-stable\" target=\"_blank\" rel=\"noopener noreferrer\">Yarn<\/a> install\u00e9.<\/li>\n<li>Le <a href=\"https:\/\/www.npmjs.com\/package\/jest\" target=\"_blank\" rel=\"noopener noreferrer\">paquet<\/a> Jest <a href=\"https:\/\/www.npmjs.com\/package\/jest\" target=\"_blank\" rel=\"noopener noreferrer\">npm<\/a> est install\u00e9.<\/li>\n<\/ul>\n<h3>Installer le paquet Jest<\/h3>\n<ol start=\"1\">\n<li>Si vous n&rsquo;avez pas encore de projet pour suivre ce tutoriel, utilisez <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">ce d\u00e9p\u00f4t<\/a> comme point de d\u00e9part.<\/li>\n<\/ol>\n<p>La branche <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> vous donne une base pour construire l&rsquo;application au fur et \u00e0 mesure que vous suivez le tutoriel. R\u00e9f\u00e9rencez la branche <code><a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">main<\/a><\/code> pour voir le code de ce tutoriel et v\u00e9rifier votre code.<\/p>\n<ol start=\"2\">\n<li>Pour installer Jest avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a>, allez dans le r\u00e9pertoire du projet dans votre terminal et ex\u00e9cutez la commande suivante :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install --save-dev jest<\/code><\/pre>\n<p>L&rsquo;option <code>--save-dev<\/code> indique \u00e0 npm d&rsquo;installer le paquet sous <code>devDependencies<\/code>, qui contient les d\u00e9pendances dont vous avez besoin pour le d\u00e9veloppement.<\/p>\n<h3>Configurer Jest<\/h3>\n<p>Bien que Jest fonctionne g\u00e9n\u00e9ralement sans configuration suppl\u00e9mentaire, il existe deux fa\u00e7ons d&rsquo;\u00e9tendre sa puissance : dans le fichier <strong>package.json<\/strong> et via un fichier de configuration Jest.<\/p>\n<h4>Configurer Jest dans <strong>package.json<\/strong><\/h4>\n<p>Dans votre fichier <strong>package.json<\/strong>, ajoutez un objet nomm\u00e9 <code>jest<\/code> avec les propri\u00e9t\u00e9s indiqu\u00e9es ci-dessous :<\/p>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"jest\": {\n    \"displayName\": \"Ecommerce\",\n    \"globals\": {\n      \"PROJECT_NAME\": \"Ecommerce TD\"\n    },\n    \"bail\": 20,\n    \"verbose\": true\n  },\n}<\/code><\/pre>\n<p>Pendant le test, Jest recherche cet objet et applique ces configurations. Vous pouvez voir des options suppl\u00e9mentaires sur <a href=\"https:\/\/jestjs.io\/docs\/26.x\/configuration\" target=\"_blank\" rel=\"noopener noreferrer\">la page de configuration de Jest<\/a>, mais les propri\u00e9t\u00e9s de cet objet sont les suivantes :<\/p>\n<ul>\n<li><code>displayName<\/code> &#8211; Jest ajoute la valeur de cette propri\u00e9t\u00e9 en tant qu&rsquo;\u00e9tiquette \u00e0 vos r\u00e9sultats de test.<\/li>\n<li><code>globals<\/code> &#8211; D\u00e9tient une valeur d&rsquo;objet pour d\u00e9finir les variables globales disponibles dans vos environnements de test.<\/li>\n<li><code>bail<\/code> &#8211; Par d\u00e9faut, Jest ex\u00e9cute tous les tests et affiche les erreurs dans les r\u00e9sultats. <code>bail<\/code> indique \u00e0 Jest d&rsquo;arr\u00eater l&rsquo;ex\u00e9cution apr\u00e8s un certain nombre d&rsquo;\u00e9checs.<\/li>\n<li><code>verbose<\/code> &#8211; Lorsqu&rsquo;il est d\u00e9fini sur <code>true<\/code>, il affiche les rapports de test individuels pendant l&rsquo;ex\u00e9cution du test.<\/li>\n<\/ul>\n<h4>Configurer Jest dans un fichier de configuration<\/h4>\n<p>Vous pouvez \u00e9galement configurer Jest dans un fichier <strong>jest.config.js<\/strong>. Jest supporte \u00e9galement les extensions <strong>.ts<\/strong>, <strong>.mjs<\/strong>, <strong>.cjs<\/strong> et <strong>.json<\/strong>. Lors de l&rsquo;ex\u00e9cution des tests, Jest recherche ces fichiers et applique les param\u00e8tres du fichier qu&rsquo;il trouve.<\/p>\n<p>Par exemple, consid\u00e9rez ce fichier <strong>jest.config.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">const config = {\n  displayName: \"Ecommerce\",\n  globals: {\n    \"PROJECT_NAME\": \"Ecommerce TD\"\n  },\n  bail: 20,\n  verbose: true\n}\n\nmodule.exports = config;<\/code><\/pre>\n<p>Le code exporte un objet de configuration Jest avec les m\u00eames propri\u00e9t\u00e9s que dans l&rsquo;exemple pr\u00e9c\u00e9dent.<\/p>\n<p>Vous pouvez \u00e9galement utiliser un fichier personnalis\u00e9 qui contient un objet de configuration s\u00e9rialisable en JSON et transmettre le chemin du fichier \u00e0 l&rsquo;option <code>--config<\/code> lors de l&rsquo;ex\u00e9cution de vos tests.<\/p>\n<h3>Cr\u00e9er un fichier de test de base<\/h3>\n<p>Une fois Jest configur\u00e9, cr\u00e9ez vos fichiers de test. Jest examine les fichiers de test de votre projet, les ex\u00e9cute et fournit les r\u00e9sultats. Les fichiers de test suivent g\u00e9n\u00e9ralement un format tel que <strong>[nom].test.js<\/strong> ou <strong>[nom]-test.js<\/strong>. Ce mod\u00e8le permet \u00e0 Jest et \u00e0 votre \u00e9quipe d&rsquo;identifier facilement vos fichiers de test.<\/p>\n<p>Consid\u00e9rez un fichier <strong>string-format.js<\/strong> qui contient le code suivant :<\/p>\n<pre><code class=\"language-js\">function truncate(\n  str,\n  count,\n  withEllipsis = true\n) {\n  if (str.length &lt; = count)\n    return str\n\n  const substring = str.substr(0, count)\n\n  if (!withEllipsis)\n    return substring\n\n  return substring + '...'\n}\n\nmodule.exports = { truncate }<\/code><\/pre>\n<p>La fonction <code>truncate()<\/code> tronque les cha\u00eenes de caract\u00e8res \u00e0 une longueur particuli\u00e8re avec la possibilit\u00e9 d&rsquo;ajouter une ellipse.<\/p>\n<h4>\u00c9crire le test<\/h4>\n<ol start=\"1\">\n<li>Cr\u00e9ez un fichier de test nomm\u00e9 <strong>string-format.test.js<\/strong>.<\/li>\n<\/ol>\n<ol start=\"1\">\n<li>Pour garder vos fichiers organis\u00e9s, placez <strong>string-format.test.js<\/strong> dans le m\u00eame r\u00e9pertoire que le fichier <strong>string-format.js<\/strong> ou dans un r\u00e9pertoire de test sp\u00e9cifique. Quel que soit l&#8217;emplacement de votre fichier de test dans le projet, Jest le trouve et l&rsquo;ex\u00e9cute. Avec Jest, vous pouvez tester vos applications dans diff\u00e9rents sc\u00e9narios.<\/li>\n<li>\u00c9crivez un test de base dans <strong>string-format.test.js<\/strong> comme suit :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { truncate } = require('.\/string-format')\n\ntest('truncates a string correctly', () = &gt; {\n  expect(truncate(\"I am going home\", 6)).toBe('I am g...')\n})<\/code><\/pre>\n<p>Le cas de test a la description suivante : <code>truncates a string correctly<\/code>. Ce code utilise la fonction <code>expect<\/code> fournie par Jest, qui teste si une valeur correspond au r\u00e9sultat attendu.<\/p>\n<p>Le code passe <code>truncate(\"I am going home\", 6)<\/code> comme argument \u00e0 <code>expect<\/code>. Ce code teste la valeur renvoy\u00e9e par l&rsquo;appel \u00e0 <code>truncate<\/code> avec les arguments <code>\"I am going home\"<\/code> et <code>6<\/code>. L&rsquo;appel \u00e0 <code>expect<\/code> renvoie un objet expectation, qui permet d&rsquo;acc\u00e9der aux correspondances de Jest.<\/p>\n<p>Il contient \u00e9galement le matcheur <code>toBe<\/code>, qui a pour argument <code>\"I am g\u2026\"<\/code>. Le matcheur <code>toBe<\/code> teste l&rsquo;\u00e9galit\u00e9 entre les valeurs attendues et les valeurs r\u00e9elles.<\/p>\n<h4>Ex\u00e9cuter le test<\/h4>\n<p>Pour ex\u00e9cuter vos tests, d\u00e9finissez la commande <code>jest<\/code>.<\/p>\n<ol start=\"1\">\n<li>Dans le fichier <strong>package.json<\/strong> de votre projet, ajoutez ce script <code>test<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>Ex\u00e9cutez maintenant <code>npm run test<\/code>, <code>npm test<\/code>, ou <code>npm t<\/code> dans votre terminal. Il ex\u00e9cute Jest pour le projet.<\/li>\n<\/ol>\n<p>Lorsque vous ex\u00e9cutez les tests, voici le r\u00e9sultat :<\/p>\n<figure>\n<figure style=\"width: 927px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-string-format-test.png\" alt=\"R\u00e9sultat positif du test Jest pour string-format.test.js.\" width=\"927\" height=\"275\"><figcaption class=\"wp-caption-text\">R\u00e9sultat positif du test Jest pour string-format.test.js.<\/figcaption><\/figure>\n<p>Les r\u00e9sultats montrent une suite de tests (le fichier <strong>string-format.test.js<\/strong>), un test ex\u00e9cut\u00e9 avec succ\u00e8s (<code>\"truncates a string correctly\"<\/code>), et le <code>displayName<\/code> (<code>Ecommerce<\/code>) que vous avez d\u00e9fini dans la configuration.<\/figure>\n<ol start=\"3\">\n<li>Dans <strong>string-format.js<\/strong>, si vous ajoutez un point suppl\u00e9mentaire pour casser le code et ex\u00e9cuter le test, celui-ci \u00e9choue :<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1100px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-failed.png\" alt=\"Le r\u00e9sultat du test Jest a \u00e9chou\u00e9 \u00e0 cause d'une fonction truncate d\u00e9fectueuse.\" width=\"1100\" height=\"612\"><figcaption class=\"wp-caption-text\">Le r\u00e9sultat du test Jest a \u00e9chou\u00e9 \u00e0 cause d&rsquo;une fonction truncate d\u00e9fectueuse.<\/figcaption><\/figure>\n<p>Ce r\u00e9sultat sugg\u00e8re que vous avez cass\u00e9 la fonction <code>truncate<\/code> ou que vous avez fait des mises \u00e0 jour qui n\u00e9cessitent une mise \u00e0 jour des tests.<\/figure>\n<h2>Comment \u00e9crire des tests avec Jest<\/h2>\n<h3>Syntaxe des tests Jest<\/h3>\n<p>La syntaxe propri\u00e9taire de Jest est simple \u00e0 utiliser. Jest expose des m\u00e9thodes et des objets globaux \u00e0 votre projet pour \u00e9crire des tests. Certains de ses termes fondamentaux sont <code>describe<\/code>, <code>test<\/code>, <code>expect<\/code>, et matchers.<\/p>\n<ul>\n<li><code>describe<\/code>: Cette fonction regroupe les tests apparent\u00e9s dans un fichier.<\/li>\n<li><code>test<\/code>: Cette fonction ex\u00e9cute le test. C&rsquo;est un alias de <code>it<\/code>. Elle contient des assertions pour les valeurs que vous souhaitez tester.<\/li>\n<li><code>expect<\/code>: Cette fonction d\u00e9clare les assertions pour diverses valeurs. Elle permet d&rsquo;acc\u00e9der \u00e0 des outils d&rsquo;appariement pour diff\u00e9rentes formes d&rsquo;assertions.<\/li>\n<li>Correspondants : Ils vous permettent d&rsquo;affirmer une valeur de diff\u00e9rentes mani\u00e8res. Vous pouvez affirmer l&rsquo;\u00e9galit\u00e9 des valeurs, l&rsquo;\u00e9galit\u00e9 bool\u00e9enne et l&rsquo;\u00e9galit\u00e9 contextuelle (par exemple, si un tableau contient la valeur).<\/li>\n<\/ul>\n<p>Pour les utiliser, consid\u00e9rez l&rsquo;exemple suivant :<\/p>\n<ol start=\"1\">\n<li>Remplacez le test du fichier <strong>string-format.test.js<\/strong> par le code suivant :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">describe(\"all string formats work as expected\", () = &gt; {\n  test(\"truncates a string correctly\", () = &gt; {\n    expect(\n      truncate(\"I am going home\", 6)\n    ).toBe(\"I am g...\")\n  })\n})<\/code><\/pre>\n<ol start=\"2\">\n<li>Ex\u00e9cutez le code.<\/li>\n<\/ol>\n<p>Le r\u00e9sultat ressemble \u00e0 ce qui suit :<\/p>\n<figure>\n<figure style=\"width: 993px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-string.png\" alt=\"R\u00e9sultat d'un test Jest r\u00e9ussi montrant la cha\u00eene describe.\" width=\"993\" height=\"292\"><figcaption class=\"wp-caption-text\">R\u00e9sultat d&rsquo;un test Jest r\u00e9ussi montrant la cha\u00eene describe.<\/figcaption><\/figure>\n<p>La capture d&rsquo;\u00e9cran montre que la cha\u00eene de la fonction <code>describe<\/code><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"> cr\u00e9e un bloc. Bien que <\/span><code>describe<\/code><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"> soit facultatif, il est utile de regrouper les tests dans un fichier avec plus de contexte.<\/span><\/figure>\n<h3>Organiser les tests en suites de tests<\/h3>\n<p>Dans Jest, un sc\u00e9nario de test se compose de la fonction <code>test<\/code>, de la fonction <code>expect<\/code> et d&rsquo;un matcher. Une collection de cas de test apparent\u00e9s constitue une suite de tests. Dans l&rsquo;exemple pr\u00e9c\u00e9dent, <strong>string-format.test.js<\/strong> est une suite de tests comprenant un sc\u00e9nario de test pour tester le fichier <strong>string-format.js<\/strong>.<\/p>\n<p>Supposons que vous ayez d&rsquo;autres fichiers dans votre projet, comme <strong>file-operations.js<\/strong>, <strong>api-logger.j<\/strong>s et <strong>number-format.js<\/strong>. Vous pouvez cr\u00e9er des suites de tests pour ces fichiers, comme <strong>file-operations.test.js<\/strong>, <strong>api-logger.test.js<\/strong>, et <strong>number-format.test.js<\/strong>.<\/p>\n<h3>\u00c9crire des assertions simples avec Jest Matchers<\/h3>\n<p>Nous avons explor\u00e9 un exemple d&rsquo;utilisation du matcher <code>toBe<\/code>. Les assertions avec d <a href=\"https:\/\/jestjs.io\/docs\/expect#matchers\" target=\"_blank\" rel=\"noopener noreferrer\">&lsquo;autres matchers Jest<\/a> incluent :<\/p>\n<ul>\n<li><code>toEqual<\/code> &#8211; Pour tester l&rsquo;\u00e9galit\u00e9 \u00ab profonde \u00bb dans les instances d&rsquo;objets.<\/li>\n<li><code>toBeTruthy<\/code> &#8211; Pour tester si une valeur est true dans un contexte bool\u00e9en.<\/li>\n<li><code>toBeFalsy<\/code> &#8211; Pour tester si une valeur est false dans un contexte bool\u00e9en.<\/li>\n<li><code>toContain<\/code> &#8211; Pour tester qu&rsquo;un tableau contient une valeur.<\/li>\n<li><code>toThrow<\/code> &#8211; Pour tester qu&rsquo;une fonction invoqu\u00e9e provoque une erreur.<\/li>\n<li><code>stringContaining<\/code> &#8211; Pour tester qu&rsquo;une cha\u00eene de caract\u00e8res contient une sous-cha\u00eene.<\/li>\n<\/ul>\n<p>Explorons des exemples utilisant certains de ces outils d&rsquo;appariement.<\/p>\n<p>Vous pouvez, par exemple, vous attendre \u00e0 ce qu&rsquo;une fonction ou un code renvoie un objet avec des propri\u00e9t\u00e9s et des valeurs sp\u00e9cifiques.<\/p>\n<ol start=\"1\">\n<li>Utilisez l&rsquo;extrait de code ci-dessous pour tester cette fonctionnalit\u00e9. Dans ce cas, vous souhaitez affirmer que l&rsquo;objet retourn\u00e9 est \u00e9gal \u00e0 l&rsquo;objet attendu.<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect({\n  name: \"Joe\",\n  age: 40\n}).toBe({\n  name: \"Joe\",\n  age: 40\n})<\/code><\/pre>\n<p>Cet exemple utilise <code>toBe<\/code>. Le test \u00e9choue car ce matcheur ne v\u00e9rifie pas l&rsquo;\u00e9galit\u00e9 en profondeur &#8211; il v\u00e9rifie la valeur, et non toutes les propri\u00e9t\u00e9s.<\/p>\n<ol start=\"2\">\n<li>Utilisez l&rsquo;outil de recherche <code>toEqual<\/code> pour v\u00e9rifier l&rsquo;\u00e9galit\u00e9 profonde :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect({\n  name: \"Joe\",\n  age: 40\n}).toEqual({\n  name: \"Joe\",\n  age: 40\n})<\/code><\/pre>\n<p>Ce test est r\u00e9ussi car les deux objets sont \u00ab profond\u00e9ment \u00e9gaux \u00bb, ce qui signifie que toutes leurs propri\u00e9t\u00e9s sont \u00e9gales.<\/p>\n<ol start=\"3\">\n<li>Essayez un autre exemple de matcher qui teste si le tableau d\u00e9fini contient un \u00e9l\u00e9ment sp\u00e9cifique.<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect([\"orange\", \"pear\", \"apple\"]).toContain(\"mango\")<\/code><\/pre>\n<p>Ce test \u00e9choue parce que <code>toContain<\/code> affirme que le tableau <code>[\"orange\", \"pear\", \"apple\"]<\/code> contient une valeur attendue <code>\"mango\"<\/code>, mais le tableau n&rsquo;en contient pas.<\/p>\n<ol start=\"4\">\n<li>Utilisez des variables pour le m\u00eame test qu&rsquo;avec le code ci-dessous :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const fruits = [\"orange\", \"pear\", \"apple\"];\nconst expectedFruit = \"mango\";\n\nexpect(fruits).toContain(expectedFruit)<\/code><\/pre>\n<h3>Tester le code asynchrone<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons test\u00e9 du code synchrone &#8211; des expressions qui renvoient une valeur avant que le code n&rsquo;ex\u00e9cute la ligne suivante. Vous pouvez \u00e9galement utiliser Jest pour du code asynchrone avec <code>async<\/code>, <code>await<\/code>, ou Promises.<\/p>\n<p>Par exemple, le fichier<strong> apis.js<\/strong> contient une fonction permettant d&rsquo;effectuer une <a href=\"https:\/\/kinsta.com\/fr\/blog\/requetes-http-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">demande d&rsquo;API<\/a>:<\/p>\n<pre><code class=\"language-js\">function getTodos() {\n  return fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1')\n}\n<\/code><\/pre>\n<p>La fonction <code>getTodos<\/code> envoie une requ\u00eate <code>GET<\/code> \u00e0 <code>https:\/\/jsonplaceholder.typicode.com\/todos\/1<\/code>.<\/p>\n<ol start=\"1\">\n<li>Cr\u00e9ez un fichier nomm\u00e9 <strong>apis.test.js<\/strong> avec le code suivant pour tester la <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">fausse API<\/a>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { getTodos } = require('.\/apis')\n\ntest(\"gets a todo object with the right properties\", () = &gt; {\n  return getTodos()\n    .then((response) = &gt; {\n      return response.json()\n    })\n    .then((data) = &gt; {\n      expect(data).toHaveProperty('userId')\n      expect(data).toHaveProperty('id')\n      expect(data).toHaveProperty('title')\n      expect(data).toHaveProperty('completed')\n      expect(data).toHaveProperty('description')\n    })\n})<\/code><\/pre>\n<p>Ce sc\u00e9nario de test invoque la fonction <code>getTodos<\/code> qui r\u00e9cup\u00e8re un objet <code>todo<\/code>. Lorsqu&rsquo;il r\u00e9sout la promesse, il utilise la m\u00e9thode <code>.then<\/code> pour obtenir la valeur r\u00e9solue.<\/p>\n<p>Dans cette valeur, le code renvoie <code>response.json()<\/code>, qui est une autre promesse qui convertit la r\u00e9ponse au format JSON. Une autre m\u00e9thode <code>.then<\/code> permet d&rsquo;obtenir l&rsquo;objet JSON contenant les <code>expect<\/code> et les matchers. Le code affirme que l&rsquo;objet JSON comprend cinq propri\u00e9t\u00e9s : <code>userId<\/code>, <code>id<\/code>, <code>title<\/code>, <code>completed<\/code>, et <code>description<\/code>.<\/p>\n<ol start=\"2\">\n<li>Ex\u00e9cuter les tests :<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1197px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-apis-failed.png\" alt=\"R\u00e9sultat du test Jest montrant l'\u00e9chec du test pour le code asynchrone.\" width=\"1197\" height=\"794\"><figcaption class=\"wp-caption-text\">R\u00e9sultat du test Jest montrant l&rsquo;\u00e9chec du test pour le code asynchrone.<\/figcaption><\/figure>\n<p>Comme le montre la capture d&rsquo;\u00e9cran, le test pour <code>getTodos()<\/code> \u00e9choue. Il attend la propri\u00e9t\u00e9 <code>description<\/code>, mais l&rsquo;API ne la renvoie pas. Gr\u00e2ce \u00e0 ces informations, vous pouvez maintenant demander \u00e0 l&rsquo;\u00e9quipe de gestion de l&rsquo;API de votre entreprise d&rsquo;inclure cette propri\u00e9t\u00e9 si l&rsquo;application en a besoin ou de mettre \u00e0 jour les tests pour qu&rsquo;ils correspondent \u00e0 la r\u00e9ponse de l&rsquo;API.<\/figure>\n<ol start=\"3\">\n<li>Supprimez l&rsquo;assertion pour la propri\u00e9t\u00e9 <code>description<\/code> et r\u00e9ex\u00e9cutez les tests :<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-async.png\" alt=\"R\u00e9sultat du test Jest montrant un test r\u00e9ussi pour le code asynchrone.\" width=\"1198\" height=\"397\"><figcaption class=\"wp-caption-text\">R\u00e9sultat du test Jest montrant un test r\u00e9ussi pour le code asynchrone.<\/figcaption><\/figure>\n<p>La capture d&rsquo;\u00e9cran montre que tout a pass\u00e9 le test.<\/figure>\n<ol start=\"4\">\n<li>Essayez maintenant d&rsquo;utiliser <code>async\/await<\/code> au lieu de la gestion traditionnelle des promesses :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">test(\"gets a todo object with the right properties\", async () = &gt; {\n  const response = await getTodos()\n  const data = await response.json()\n\n  expect(data).toHaveProperty(\"userId\")\n  expect(data).toHaveProperty(\"id\")\n  expect(data).toHaveProperty(\"title\")\n  expect(data).toHaveProperty(\"completed\")\n})<\/code><\/pre>\n<p>Le mot-cl\u00e9 <code>async<\/code> est maintenant plac\u00e9 avant la fonction. Le code utilise <code>await<\/code> avant <code>getTodos()<\/code> et <code>await<\/code> avant <code>response.json()<\/code>.<\/p>\n<h2>Fonctionnalit\u00e9s avanc\u00e9es de Jest<\/h2>\n<h3>Fonctions et modules fictifs<\/h3>\n<p>Vous pouvez vouloir tester une expression avec des d\u00e9pendances externes lorsque vous \u00e9crivez des tests. Dans certains cas, en particulier les tests unitaires, vos tests unitaires doivent \u00eatre isol\u00e9s des effets externes. Dans ce cas, vous pouvez simuler vos fonctions ou modules avec Jest pour mieux contr\u00f4ler vos tests.<\/p>\n<ol start=\"1\">\n<li>Par exemple, consid\u00e9rez un fichier <strong>functions.js<\/strong> qui contient le code suivant :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">function multipleCalls(count, callback) {\n  if (count &lt; 0) return;\n\n  for (let counter = 1; counter &lt;= count; counter++) {\n    callback()\n  }\n}<\/code><\/pre>\n<p>La fonction <code>multipleCalls<\/code> est ex\u00e9cut\u00e9e en fonction de la valeur de <code>count<\/code>. Elle d\u00e9pend de la fonction de rappel &#8211; la d\u00e9pendance externe. Son but est de savoir si <code>multipleCalls<\/code> ex\u00e9cute correctement la d\u00e9pendance externe.<\/p>\n<ol start=\"2\">\n<li>Pour simuler la d\u00e9pendance externe et suivre son \u00e9tat dans votre fichier de test, <strong>functions.test.js<\/strong>, utilisez ce code :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { multipleCalls } = require('.\/functions')\n\ntest(\"functions are called multiple times correctly\", () =&gt; {\n  const mockFunction = jest.fn()\n\n  multipleCalls(5, mockFunction)\n\n  expect(\n    mockFunction.mock.calls.length\n  ).toBe(5)\n})<\/code><\/pre>\n<p>Ici, la m\u00e9thode <code>fn<\/code> de l&rsquo;objet <code>jest<\/code> cr\u00e9e une fonction fictive. Ensuite, le code ex\u00e9cute <code>multipleCalls<\/code> en passant <code>5<\/code> et la fonction fictive comme arguments. Il affirme ensuite que la m\u00e9thode <code>mockFunction<\/code> est appel\u00e9e cinq fois. La propri\u00e9t\u00e9 <code>mock<\/code> contient des informations sur la fa\u00e7on dont le code appelle la fonction et les valeurs renvoy\u00e9es.<\/p>\n<ol start=\"3\">\n<li>Lorsque vous ex\u00e9cutez le test, le r\u00e9sultat attendu est le suivant :<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1191px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-multiplecalls.png\" alt=\"R\u00e9sultat d'un test Jest r\u00e9ussi avec une fonction fictive.\" width=\"1191\" height=\"465\"><figcaption class=\"wp-caption-text\">R\u00e9sultat d&rsquo;un test Jest r\u00e9ussi avec une fonction fictive.<\/figcaption><\/figure>\n<p>Comme vous pouvez le constater, le code appelle le site <code>mockFunction<\/code> cinq fois.<\/figure>\n<p>Dans le code, la fonction fictive imite une d\u00e9pendance externe. La nature de la d\u00e9pendance externe importe peu lorsque l&rsquo;application utilise <code>multipleCalls<\/code> en production. Votre test unitaire ne se pr\u00e9occupe pas de la fa\u00e7on dont la d\u00e9pendance externe fonctionne. Il v\u00e9rifie simplement que <code>multipleCalls<\/code> fonctionne comme pr\u00e9vu.<\/p>\n<ol start=\"4\">\n<li>Pour simuler des modules, utilisez la m\u00e9thode <code>mock<\/code> et passez un chemin de fichier, qui est le module :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const {\n  truncate,\n} = require(\".\/string-format\")\n\njest.mock(\".\/string-format.js\")<\/code><\/pre>\n<p>Ce code imite toutes les fonctions export\u00e9es par <strong>string-format.js<\/strong> et v\u00e9rifie combien de fois il les appelle. L&rsquo;adresse <code>truncate<\/code> du module devient une fonction fictive, ce qui fait perdre \u00e0 la fonction sa logique d&rsquo;origine. Vous pouvez savoir combien de fois <code>truncate<\/code> s&rsquo;ex\u00e9cute dans vos tests dans la propri\u00e9t\u00e9 <code>truncate.mock.calls.length<\/code>.<\/p>\n<p>Si vous avez une erreur ou si votre code ne fonctionne pas, comparez votre code avec l&rsquo;<a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">impl\u00e9mentation compl\u00e8te<\/a>.<\/p>\n<h2>Tester les composants React avec Jest et la biblioth\u00e8que de test React<\/h2>\n<p>Si vous n&rsquo;avez pas encore de projet pour suivre ce tutoriel, vous pouvez utiliser <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\" target=\"_blank\" rel=\"noopener noreferrer\">ce projet d&rsquo;exemple React<\/a> comme point de d\u00e9part. La branche <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> vous permet de commencer \u00e0 composer le code au fur et \u00e0 mesure que vous suivez le tutoriel. Utilisez la branche <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/main\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>main<\/code><\/a> comme r\u00e9f\u00e9rence pour v\u00e9rifier votre code par rapport au code complet de ce tutoriel.<\/p>\n<p>Vous pouvez utiliser Jest pour tester des frameworks JavaScript tels que <a href=\"https:\/\/kinsta.com\/fr\/sujets\/react\/\">React<\/a>. Lorsque vous cr\u00e9ez des projets React \u00e0 l&rsquo;aide de <a href=\"https:\/\/create-react-app.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create React App<\/a>, ils prennent en charge la React Testing Library et Jest d\u00e8s le d\u00e9part. Si vous cr\u00e9ez un projet React sans Create React App, installez Jest pour tester React avec Babel et la <a href=\"https:\/\/github.com\/kentcdodds\/react-testing-library\" target=\"_blank\" rel=\"noopener noreferrer\">biblioth\u00e8que de test React<\/a>. Si vous clonez la branche <code>starter-app<\/code>, vous n&rsquo;avez pas besoin d&rsquo;installer des d\u00e9pendances ou d&rsquo;appliquer des configurations.<\/p>\n<ol start=\"1\">\n<li>Si vous utilisez le projet d&rsquo;exemple, utilisez cette commande pour installer les d\u00e9pendances n\u00e9cessaires :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install --save-dev babel-jest @babel\/preset-env @babel\/preset-react react-testing-library<\/code><\/pre>\n<p>Vous pouvez \u00e9galement utiliser <a href=\"https:\/\/www.npmjs.com\/package\/enzyme\" target=\"_blank\" rel=\"noopener noreferrer\">Enzyme<\/a> \u00e0 la place de React Testing Library.<\/p>\n<ol start=\"2\">\n<li>Mettez \u00e0 jour vos configurations Babel dans <strong>babel.config.js <\/strong>ou cr\u00e9ez ce fichier s&rsquo;il n&rsquo;existe pas :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">module.exports = {\n  presets: [\n    '@babel\/preset-env',\n      ['@babel\/preset-react', {runtime: 'automatic'}],\n  ],\n};<\/code><\/pre>\n<ol start=\"3\">\n<li>Consid\u00e9rez le fichier <strong>src\/SubmitButton.js <\/strong>qui contient le code suivant :<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import React, { useState } from 'react'\n\nexport default function SubmitButton(props) {\n  const {id, label, onSubmit} = props\n  const [isLoading, setisLoading] = useState(false)\n\n  const submit = () =&gt; {\n    setisLoading(true)\n    onSubmit()\n  }\n\n  return <button disabled=\"disabled\" data-testid=\"{id}\"><\/button><\/code><\/pre>\n<p>Ce composant <code>SubmitButton<\/code> re\u00e7oit trois accessoires :<\/p>\n<ul>\n<li><code>id<\/code> &#8211; L&rsquo;identifiant du bouton.<\/li>\n<li><code>label<\/code> &#8211; Le texte \u00e0 afficher dans le bouton.<\/li>\n<li><code>onSubmit<\/code> &#8211; La fonction \u00e0 d\u00e9clencher lorsque quelqu&rsquo;un clique sur le bouton.<\/li>\n<\/ul>\n<p>Le code attribue la propri\u00e9t\u00e9 <code>id<\/code> \u00e0 l&rsquo;attribut <code>data-testid<\/code>, qui identifie un \u00e9l\u00e9ment \u00e0 tester.<\/p>\n<p>Le composant suit \u00e9galement l&rsquo;\u00e9tat <code>isLoading<\/code> et le met \u00e0 jour \u00e0 <code>true<\/code> lorsque quelqu&rsquo;un clique sur le bouton.<\/p>\n<ol start=\"4\">\n<li>Cr\u00e9ez le test pour ce composant. Placez le code suivant dans un fichier <strong>SubmitButton.test.js<\/strong>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import {fireEvent, render, screen} from \"@testing-library\/react\"\nimport \"@testing-library\/jest-dom\"\nimport SubmitButton from \".\/SubmitButton\"\n\ntest(\"SubmitButton becomes disabled after click\", () =&gt; {\n  const submitMock = jest.fn()\n\n  render(\n    &lt;SubmitButton\n      id=\"submit-details\"\n      label=\"Submit\"\n      onSubmit={submitMock}\n    \/ &gt;\n  )\n\n  expect(screen.getByTestId(\"submit-details\")).not.toBeDisabled()\n\n  fireEvent.submit(screen.getByTestId(\"submit-details\"))\n\n  expect(screen.getByTestId(\"submit-details\")).toBeDisabled()\n})<\/code><\/pre>\n<p>Le code ci-dessus rend le composant <code>SubmitButton<\/code> et utilise la m\u00e9thode de requ\u00eate <code>screen.getByTestId<\/code> pour obtenir le n\u0153ud du DOM par l&rsquo;attribut <code>data-testid<\/code>.<\/p>\n<p>Le premier <code>expect<\/code> est <code>getByTestId(\"submit-details\")<\/code> et utilise le modificateur <code>not<\/code> et le comparateur <code>toBeDisabled<\/code> (expos\u00e9 \u00e0 partir de <code>react-testing-library<\/code>) pour affirmer que le bouton n&rsquo;est pas d\u00e9sactiv\u00e9. Utilisez le modificateur <code>not<\/code> avec tous les matcheurs pour affirmer l&rsquo;oppos\u00e9 du matcheur.<\/p>\n<p>Ensuite, le code d\u00e9clenche l&rsquo;\u00e9v\u00e9nement <code>submit<\/code> sur le composant et v\u00e9rifie que le bouton est d\u00e9sactiv\u00e9. Vous pouvez trouver d&rsquo;autres adaptateurs personnalis\u00e9s dans <a href=\"https:\/\/github.com\/testing-library\/jest-dom#custom-matchers\" target=\"_blank\" rel=\"noopener noreferrer\">la documentation de la biblioth\u00e8que de tests<\/a>.<\/p>\n<ol start=\"5\">\n<li>Maintenant, ex\u00e9cutez les tests. Si vous avez clon\u00e9 la branche <code>starter-files<\/code>, assurez-vous que toutes les d\u00e9pendances du projet sont install\u00e9es en ex\u00e9cutant <code>npm install<\/code> avant de lancer vos tests.<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-react.png\" alt=\"R\u00e9sultat d'un test Jest montrant que le test d'un composant react a r\u00e9ussi.\" width=\"941\" height=\"353\"><figcaption class=\"wp-caption-text\">R\u00e9sultat d&rsquo;un test Jest montrant que le test d&rsquo;un composant react a r\u00e9ussi.<\/figcaption><\/figure><\/figure>\n<h3>Ex\u00e9cuter des rapports de couverture de code<\/h3>\n<p>Jest propose \u00e9galement des rapports de couverture de code pour montrer la part de votre projet que vous testez.<\/p>\n<ol start=\"1\">\n<li>Passez l&rsquo;option <code>--coverage<\/code> \u00e0 Jest. Dans votre script Jest dans <strong>package.json <\/strong>(dans le projet JavaScript), mettez \u00e0 jour la commande Jest avec cette option de couverture :<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest --coverage\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>Ex\u00e9cutez <code>npm run test<\/code> pour tester votre code. Vous obtenez un rapport comme le suivant :<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1183px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-coverage-report.png\" alt=\"Rapport de couverture Jest pour chaque combinaison de test.\" width=\"1183\" height=\"631\"><figcaption class=\"wp-caption-text\">Rapport de couverture Jest pour chaque combinaison de test.<\/figcaption><\/figure>\n<p>Ce rapport montre que Jest a test\u00e9 100% des fonctions dans<\/figure>\n<p><strong>SubmitButton.j<\/strong> s et <strong>string-format.js<\/strong>. Il indique \u00e9galement que Jest n&rsquo;a pas test\u00e9 de d\u00e9clarations et de lignes dans <strong>string-format.j<\/strong>s. La couverture des tests montre que les lignes non couvertes dans <strong>string-format.js<\/strong> sont 7 et 12.<\/p>\n<p>\u00c0 la ligne 7, <code>return str<\/code> dans la fonction <code>truncate<\/code> ne s&rsquo;ex\u00e9cute pas parce que la condition <code>if (str.length &lt;= count)<\/code> renvoie <code>false<\/code>.<\/p>\n<p>\u00c0 la ligne 12, toujours dans la fonction <code>truncate<\/code>, <code>return substring<\/code> ne s&rsquo;ex\u00e9cute pas car la condition <code>if (!withEllipsis)<\/code> renvoie <code>false.<\/code><\/p>\n<h2>Int\u00e9grer Jest \u00e0 votre flux de d\u00e9veloppement<\/h2>\n<p>Voyons comment vous pouvez int\u00e9grer ces tests pour am\u00e9liorer votre flux de d\u00e9veloppement.<\/p>\n<h3>Ex\u00e9cutez les tests en mode veille<\/h3>\n<p>Au lieu d&rsquo;ex\u00e9cuter les tests manuellement, vous pouvez les ex\u00e9cuter automatiquement lorsque vous modifiez votre code en utilisant le mode de surveillance.<\/p>\n<ol start=\"1\">\n<li>Pour activer le mode veille, mettez \u00e0 jour votre script de commande Jest dans <strong>package.json <\/strong>(dans le projet JavaScript) en ajoutant l&rsquo;option <code>--watchAll<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest --coverage --watchAll\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>Ex\u00e9cutez <code>npm run test<\/code>. Il d\u00e9clenche Jest en mode veille :<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1197px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-watch-mode.png\" alt=\"Ex\u00e9cution de Jest en mode veille.\" width=\"1197\" height=\"730\"><figcaption class=\"wp-caption-text\">Ex\u00e9cution de Jest en mode veille.<\/figcaption><\/figure>\n<p>Les tests s&rsquo;ex\u00e9cutent \u00e0 chaque fois que vous modifiez votre projet. Cette approche favorise un retour d&rsquo;information continu au fur et \u00e0 mesure que vous construisez votre application.<\/figure>\n<h3>Mettre en place des hooks de pr\u00e9-commit<\/h3>\n<p>Dans les environnements Git, les hooks ex\u00e9cutent des scripts \u00e0 chaque fois qu&rsquo;un \u00e9v\u00e9nement particulier se produit (comme pull, push ou commit). Les hooks de pr\u00e9-commit d\u00e9finissent les scripts \u00e0 ex\u00e9cuter pour l&rsquo;\u00e9v\u00e8nement de pr\u00e9-commit (que le code d\u00e9clenche avant d&rsquo;effectuer une validation).<\/p>\n<p>La validation ne r\u00e9ussit que si le script ne g\u00e9n\u00e8re pas d&rsquo;erreur.<\/p>\n<p>L&rsquo;ex\u00e9cution de Jest avant le pre-commit garantit qu&rsquo;aucun de vos tests n&rsquo;\u00e9choue avant la validation.<\/p>\n<p>Vous pouvez utiliser diverses biblioth\u00e8ques pour mettre en place des hooks git dans votre projet, comme <a href=\"https:\/\/www.npmjs.com\/package\/ghooks\" target=\"_blank\" rel=\"noopener noreferrer\">ghooks<\/a>.<\/p>\n<ol start=\"1\">\n<li>Installez <code>ghooks<\/code> sous <code>devDependencies<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install ghooks --save-dev<\/code><\/pre>\n<ol start=\"2\">\n<li>Ajoutez un objet <code>configs<\/code> au niveau sup\u00e9rieur de votre fichier <strong>package.json<\/strong> (dans le projet JavaScript).<\/li>\n<li>Ajoutez un objet <code>ghooks<\/code> sous <code>configs<\/code>.<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Ajoutez une propri\u00e9t\u00e9 dont la cl\u00e9 est <code>pre-commit<\/code> et la valeur <code>jest<\/code>.<\/li>\n<\/ol>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"config\": {\n    \"ghooks\": {\n      \"pre-commit\": \"jest\"\n    }\n  },\n}<\/code><\/pre>\n<ol start=\"5\">\n<li>Validez le code. Le code d\u00e9clenche le hook pre-commit, qui ex\u00e9cute Jest :<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 1183px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-pre-commit.png\" alt=\"Ex\u00e9cuter Jest pendant le pre-commit en utilisant les ghooks.\" width=\"1183\" height=\"803\"><figcaption class=\"wp-caption-text\">Ex\u00e9cuter Jest pendant le pre-commit en utilisant les ghooks.<\/figcaption><\/figure><\/figure>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Vous savez maintenant comment int\u00e9grer Jest dans votre flux de d\u00e9veloppement pour qu&rsquo;il s&rsquo;ex\u00e9cute automatiquement chaque fois que vous effectuez une modification. Cette approche permet un retour d&rsquo;information continu afin que vous puissiez corriger rapidement tout probl\u00e8me de code avant de mettre vos modifications en production.<\/p>\n<p>En <a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergeant votre application chez Kinsta<\/a>, vous b\u00e9n\u00e9ficiez d&rsquo;une infrastructure rapide et s\u00e9curis\u00e9e, d\u00e9ployant vos projets sur une infrastructure construite sur le r\u00e9seau Premium Tier et les machines C2 de Google Cloud Platform. Choisissez entre les 27 centres de donn\u00e9es et un CDN compatible HTTP\/3 avec 300 PoP.<\/p>\n<p>Restez en s\u00e9curit\u00e9 gr\u00e2ce \u00e0 la technologie des conteneurs isol\u00e9s, \u00e0 deux pare-feu puissants et \u00e0 une protection DDoS avanc\u00e9e aliment\u00e9e par Cloudflare. Et vous pouvez int\u00e9grer des applications ou automatiser des flux de travail avec l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/docs\/api-kinsta\/\">API Kinsta<\/a>.<\/p>\n<p>Configurez Jest et parcourez les ressources de Kinsta d\u00e8s aujourd&rsquo;hui pour <a href=\"https:\/\/kinsta.com\/javascript\/\">am\u00e9liorer vos applications JavaScript<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les tests de logiciels sont essentiels pour garantir que vos applications fonctionnent comme pr\u00e9vu, en particulier lorsque vous introduisez des changements. La d\u00e9tection et la correction &#8230;<\/p>\n","protected":false},"author":290,"featured_media":72761,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[979,980],"class_list":["post-72760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-tutoriel-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment tester vos applications avec Jest - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l&#039;int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment tester vos applications avec Jest\" \/>\n<meta property=\"og:description\" content=\"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l&#039;int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-13T09:40:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-28T11:21:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l&#039;int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Comment tester vos applications avec Jest\",\"datePublished\":\"2023-09-13T09:40:17+00:00\",\"dateModified\":\"2023-09-28T11:21:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\"},\"wordCount\":3499,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\",\"name\":\"Comment tester vos applications avec Jest - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg\",\"datePublished\":\"2023-09-13T09:40:17+00:00\",\"dateModified\":\"2023-09-28T11:21:07+00:00\",\"description\":\"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l'int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment tester vos applications avec Jest\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment tester vos applications avec Jest - Kinsta\u00ae","description":"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l'int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment tester vos applications avec Jest","og_description":"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l'int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.","og_url":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-09-13T09:40:17+00:00","article_modified_time":"2023-09-28T11:21:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l'int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Marcia Ramos","Dur\u00e9e de lecture estim\u00e9e":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Comment tester vos applications avec Jest","datePublished":"2023-09-13T09:40:17+00:00","dateModified":"2023-09-28T11:21:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/"},"wordCount":3499,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/","url":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/","name":"Comment tester vos applications avec Jest - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg","datePublished":"2023-09-13T09:40:17+00:00","dateModified":"2023-09-28T11:21:07+00:00","description":"Explorons le c\u00e9l\u00e8bre framework Jest, ses fonctionnalit\u00e9s et la meilleure fa\u00e7on de l'int\u00e9grer dans votre flux de travail de d\u00e9veloppeur.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/09\/jest.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/tester-applications-jest\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/fr\/sujets\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"Comment tester vos applications avec Jest"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/72760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=72760"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/72760\/revisions"}],"predecessor-version":[{"id":73363,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/72760\/revisions\/73363"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/72760\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/72761"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=72760"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=72760"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=72760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}