{"id":73030,"date":"2023-09-13T10:40:45","date_gmt":"2023-09-13T09:40:45","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=73030&#038;preview=true&#038;preview_id=73030"},"modified":"2023-09-28T12:20:33","modified_gmt":"2023-09-28T11:20:33","slug":"jest","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/jest\/","title":{"rendered":"Come testare le applicazioni con Jest"},"content":{"rendered":"<p>Il <a href=\"https:\/\/kinsta.com\/it\/blog\/strumenti-test-prestazioni\/\">testing<\/a> del software \u00e8 fondamentale per garantire che le vostre applicazioni funzionino come previsto, soprattutto quando introducete delle modifiche. Individuare e correggere gli errori nelle prime fasi dello sviluppo \u00e8 fondamentale per mantenere un codice resistente e di alta qualit\u00e0.<\/p>\n<p>Tra i tanti strumenti e framework disponibili per il testing di JavaScript, Jest \u00e8 uno dei pi\u00f9 popolari. Prodotto da Meta, Jest offre ampie funzionalit\u00e0 di testing per le applicazioni JavaScript e per quelle realizzate con framework JavaScript.<\/p>\n<p>Vediamo insieme il framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel vostro workflow di sviluppo.<\/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>Cos&#8217;\u00e8 Jest?<\/h2>\n<p><a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> \u00e8 un framework flessibile e semplice da usare. Oltre alle sue funzioni principali di test JavaScript, offre configurazioni e plugin per supportare il test di applicazioni basate su Babel, webpack, Vite, Parcel o <a href=\"https:\/\/kinsta.com\/it\/blog\/typescript\/\">TypeScript<\/a>.<\/p>\n<p>Jest \u00e8 stato largamente adottato da chi lavora nello sviluppo e vanta una serie di plugin costruiti e gestiti dalla comunit\u00e0. Si distingue per la sua facilit\u00e0 d&#8217;uso: i test JavaScript non richiedono configurazioni o plugin aggiuntivi. Ma potete anche eseguire test pi\u00f9 avanzati, come quelli sui <a href=\"https:\/\/kinsta.com\/it\/argomenti\/framework-javascript\/\">framework JavaScript<\/a>, utilizzando alcune opzioni di configurazione aggiuntive.<\/p>\n<h2>Come configurare Jest per il vostro progetto JavaScript<\/h2>\n<p>Vediamo come configurare Jest in un progetto JavaScript esistente.<\/p>\n<h3>Prerequisiti<\/h3>\n<p>Per seguire questo tutorial, assicuratevi di avere i seguenti requisiti:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> installato.<\/li>\n<li>npm (gi\u00e0 parte di Node.js) o <a href=\"https:\/\/classic.yarnpkg.com\/lang\/en\/docs\/install\/#windows-stable\" target=\"_blank\" rel=\"noopener noreferrer\">Yarn<\/a> installati.<\/li>\n<li>Il <a href=\"https:\/\/www.npmjs.com\/package\/jest\" target=\"_blank\" rel=\"noopener noreferrer\">pacchetto Jest npm<\/a> installato.<\/li>\n<\/ul>\n<h3>Installare il pacchetto Jest<\/h3>\n<ol start=\"1\">\n<li>Se non avete gi\u00e0 un progetto da seguire in questo tutorial, usate <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">questo repo<\/a> come punto di partenza.<\/li>\n<\/ol>\n<p>Il branch <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> vi fornisce una base per costruire l&#8217;applicazione mentre seguite il tutorial. Fate riferimento al <code><a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">main<\/a><\/code> per visualizzare il codice di questo tutorial e fare un controllo incrociato del vostro codice.<\/p>\n<ol start=\"2\">\n<li>Per installare Jest con <a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">npm<\/a>, andate nella directory del progetto nel vostro terminale ed eseguite il seguente comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install --save-dev jest<\/code><\/pre>\n<p>L&#8217;opzione <code>--save-dev<\/code> indica a npm di installare il pacchetto sotto <code>devDependencies<\/code>, che contiene le dipendenze necessarie per lo sviluppo.<\/p>\n<h3>Configurare Jest<\/h3>\n<p>Anche se Jest funziona generalmente senza alcuna configurazione aggiuntiva, ci sono due modi per espandere la sua potenza: dal file <strong>package.json<\/strong> e tramite un file di configurazione di Jest.<\/p>\n<h4>Configurare Jest in <strong>package.json<\/strong><\/h4>\n<p>Nel file <strong>package.json<\/strong>, aggiungete un oggetto chiamato <code>jest<\/code> con le propriet\u00e0 mostrate di seguito:<\/p>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"jest\": {\n\t\"displayName\": \"Ecommerce\",\n\t\"globals\": {\n  \t\"PROJECT_NAME\": \"Ecommerce TD\"\n\t},\n\t\"bail\": 20,\n\t\"verbose\": true\n  },\n}<\/code><\/pre>\n<p>Durante il test, Jest cerca questo oggetto e applica queste configurazioni. Potete visualizzare altre opzioni nella <a href=\"https:\/\/jestjs.io\/docs\/26.x\/configuration\" target=\"_blank\" rel=\"noopener noreferrer\">pagina delle configurazioni di Jest<\/a>, ma le propriet\u00e0 di questo oggetto includono:<\/p>\n<ul>\n<li><code>displayName<\/code>: Jest aggiunge il valore di questa propriet\u00e0 come etichetta ai risultati del test.<\/li>\n<li><code>globals<\/code>: contiene il valore di un oggetto per definire le variabili globali disponibili negli ambienti di test.<\/li>\n<li><code>bail<\/code>: per impostazione predefinita, Jest esegue tutti i test e visualizza gli errori nei risultati. <code>bail<\/code>\u00a0indica a Jest di interrompere l&#8217;esecuzione dopo un determinato numero di test non riusciti.<\/li>\n<li><code>verbose<\/code>: se impostato su <code>true<\/code>, mostra i report dei singoli test durante la loro esecuzione.<\/li>\n<\/ul>\n<h4>Configurare Jest in un file di configurazione<\/h4>\n<p>Potete anche configurare Jest in un file <strong>jest.config.js<\/strong>. Jest supporta anche le estensioni <strong>.ts<\/strong>, <strong>.mjs<\/strong>, <strong>.cjs<\/strong> e <strong>.json<\/strong>. Quando esegue i test, Jest cerca questi file e applica le impostazioni del file che trova.<\/p>\n<p>Per esempio, prendiamo questo file <strong>jest.config.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">const config = {\n  displayName: \"Ecommerce\",\n  globals: {\n\t\"PROJECT_NAME\": \"Ecommerce TD\"\n  },\n  bail: 20,\n  verbose: true\n}\n\nmodule.exports = config;<\/code><\/pre>\n<p>Il codice esporta un oggetto di configurazione Jest con le stesse propriet\u00e0 dell&#8217;esempio precedente.<\/p>\n<p>Potete anche usare un file personalizzato che contenga un oggetto di configurazione serializzabile JSON e passare il percorso del file all&#8217;opzione <code>--config<\/code> durante l&#8217;esecuzione dei test.<\/p>\n<h3>Creare un file di test di base<\/h3>\n<p>Dopo aver configurato Jest, create i vostri file di test. Jest esamina i file di test del vostro progetto, li esegue e fornisce i risultati. I file di test di solito seguono un formato simile a <strong>[nome].test.js<\/strong> o <strong>[nome]-test.js<\/strong>. Questo schema facilita l&#8217;identificazione dei file di test sia da parte di Jest che del vostro team.<\/p>\n<p>Prendiamo in esame un file <strong>string-format.js<\/strong> con il seguente codice:<\/p>\n<pre><code class=\"language-js\">function truncate(\n  str,\n  count,\n  withEllipsis = true\n) {\n  if (str.length &lt; = count)\n\treturn str\n\n  const substring = str.substr(0, count)\n\n  if (!withEllipsis)\n\treturn substring\n\n  return substring + '...'\n}\n\nmodule.exports = { truncate }<\/code><\/pre>\n<p>La funzione <code>truncate()<\/code> tronca le stringhe a una determinata lunghezza con l&#8217;opzione di aggiungere un&#8217;ellissi.<\/p>\n<h4>Scrivere il test<\/h4>\n<ol start=\"1\">\n<li>Create un file di prova chiamato <strong>string-format.test.js<\/strong>.<\/li>\n<\/ol>\n<ol start=\"1\">\n<li>Per mantenere l&#8217;organizzazione dei vostri file, posizionate <strong>string-format.test.js<\/strong> nella stessa directory in cui si trova il file <strong>string-format.js<\/strong> o in una directory di test specifica. Indipendentemente dalla posizione del file di test all&#8217;interno del progetto, Jest lo trova e lo esegue. Con Jest potete testare le vostre applicazioni in vari scenari.<\/li>\n<li>Scrivete un test di base in <strong>string-format.test.js<\/strong> come segue:<\/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>Il caso di test ha la descrizione <code>truncates a string correctly<\/code>. Questo codice usa la funzione <code>expect<\/code> fornita da Jest, che verifica se un valore corrisponde al risultato atteso.<\/p>\n<p>Il codice passa <code>truncate(\"I am going home\", 6)<\/code> come argomento a <code>expect<\/code>. Questo codice testa il valore restituito dalla chiamata a <code>truncate<\/code> con gli argomenti <code>\"I am going home\"<\/code> e <code>6<\/code>. La chiamata a <code>expect<\/code> restituisce un oggetto expectation, che offre accesso alle corrispondenze di Jest.<\/p>\n<p>Contiene anche il matcher <code>toBe<\/code>, che ha <code>\"I am g\u2026\"<\/code> come argomento. Il matcher <code>toBe<\/code> verifica l&#8217;uguaglianza tra i valori attesi e quelli reali.<\/p>\n<h4>Eseguire il test<\/h4>\n<p>Per eseguire i vostri test, definite il comando <code>jest<\/code>.<\/p>\n<ol start=\"1\">\n<li>Nel file <strong>package.json<\/strong> del vostro progetto, aggiungete questo 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>Ora eseguite <code>npm run test<\/code>, <code>npm test<\/code> o <code>npm t<\/code> nel vostro terminale. Esegue Jest per il progetto.<\/li>\n<\/ol>\n<p>Quando eseguite i test, il risultato \u00e8 questo:<\/p>\n<figure>\n<p><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=\"Il risultato del test Jest mostra il superamento del test \"truncates a string correctly\" in string-format.test.js.\" width=\"927\" height=\"275\"><figcaption class=\"wp-caption-text\">Risultato del test Jest per string-format.test.js.<\/figcaption><\/figure><\/figure>\n<p>I risultati mostrano una suite di test (il file <strong>string-format.test.js<\/strong>), un test eseguito con successo (<code>\"truncates a string correctly\"<\/code>) e il <code>displayName<\/code> (<code>Ecommerce<\/code>) che avete definito nella configurazione.<\/p>\n<ol start=\"3\">\n<li>In <strong>string-format.js<\/strong>, se aggiungete un punto in pi\u00f9 per interrompere il codice ed eseguire il test, questo fallisce:<\/li>\n<\/ol>\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=\"Il risultato del test Jest \u00e8 fallito per il test \"truncates a string correctly\" in string-format.test.js. La stringa attesa dal test \u00e8 \"i am g...\", ma la stringa ricevuta \u00e8 \"i am g....\".\" width=\"1100\" height=\"612\"><figcaption class=\"wp-caption-text\">Risultato fallito del test Jest per una funzione truncate interrotta&#8221;.<\/figcaption><\/figure>\n<p>Questo risultato suggerisce che la funzione <code>truncate<\/code> \u00e8 stata interrotta o che sono stati fatti degli aggiornamenti che richiedono l&#8217;aggiornamento dei test.<\/p>\n<h2>Come scrivere i test con Jest<\/h2>\n<h3>Sintassi dei test Jest<\/h3>\n<p>La sintassi proprietaria di Jest \u00e8 semplice da usare. Jest espone al vostro progetto metodi e oggetti globali per la scrittura dei test. Alcuni dei suoi termini fondamentali sono <code>describe<\/code>, <code>test<\/code>, <code>expect<\/code> e matcher.<\/p>\n<ul>\n<li><code>describe<\/code>: questa funzione raggruppa i test correlati in un file.<\/li>\n<li><code>test<\/code>: questa funzione esegue il test. \u00c8 un alias di <code>it<\/code>. Contiene le asserzioni per i valori che volete testare.<\/li>\n<li><code>expect<\/code>: questa funzione dichiara le asserzioni per i vari valori. Fornisce l&#8217;accesso ai matcher per varie forme di asserzioni.<\/li>\n<li>Matcher: vi permettono di asserire un valore in vari modi. Potete asserire l&#8217;uguaglianza dei valori, l&#8217;uguaglianza booleana e l&#8217;uguaglianza contestuale (per esempio se un array contiene il valore).<\/li>\n<\/ul>\n<p>Per usarli, considerate il seguente esempio:<\/p>\n<ol start=\"1\">\n<li>Sostituite il test nel file <strong>string-format.test.js<\/strong> con il seguente codice:<\/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\texpect(\n  \ttruncate(\"I am going home\", 6)\n\t).toBe(\"I am g...\")\n  })\n})<\/code><\/pre>\n<ol start=\"2\">\n<li>Eseguite il codice.<\/li>\n<\/ol>\n<p>Il risultato \u00e8 il seguente:<\/p>\n<figure>\n<p><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=\"Il risultato del test Jest mostra il superamento del test \"truncates a string correctly\" in string-format.test.js. Il risultato del test mostra anche il testo \"tutti i formati di stringa funzionano come previsto\" dalla funzione describe.\" width=\"993\" height=\"292\"><figcaption class=\"wp-caption-text\">Risultato del test Jest che mostra l&#8217;etichetta di descrizione.<\/figcaption><\/figure><\/figure>\n<p>La schermata mostra che l&#8217;etichetta della funzione <code>describe<\/code> crea un blocco. Sebbene <code>describe<\/code> sia facoltativo, \u00e8 utile raggruppare i test in un file con un contesto pi\u00f9 ampio.<\/p>\n<h3>Organizzare i test in suite di test<\/h3>\n<p>In Jest, un caso di test \u00e8 composto dalla funzione <code>test<\/code>, dalla funzione <code>expect<\/code> e da un matcher. Un insieme di casi di test correlati \u00e8 una suite di test. Nell&#8217;esempio precedente, <strong>string-format.test.js<\/strong> \u00e8 una suite di test che comprende un caso di test per verificare il file <strong>string-format.js<\/strong>.<\/p>\n<p>Supponiamo di avere altri file nel progetto, come <strong>file-operations.js<\/strong>, <strong>api-logger.js<\/strong> e <strong>number-format.js<\/strong>. Potete creare delle suite di test per questi file, come <strong>file-operations.test.js<\/strong>, <strong>api-logger.test.js<\/strong> e <strong>number-format.test.js<\/strong>.<\/p>\n<h3>Scrivere semplici asserzioni con Jest Matchers<\/h3>\n<p>Abbiamo esplorato un esempio di utilizzo del matcher <code>toBe<\/code>. Le asserzioni con <a href=\"https:\/\/jestjs.io\/docs\/expect#matchers\" target=\"_blank\" rel=\"noopener noreferrer\">altri matcher Jest<\/a> includono:<\/p>\n<ul>\n<li><code>toEqual<\/code>: per verificare l&#8217;uguaglianza &#8220;profonda&#8221; nelle istanze degli oggetti.<\/li>\n<li><code>toBeTruthy<\/code>: per verificare se un valore \u00e8 vero in un contesto booleano.<\/li>\n<li><code>toBeFalsy<\/code>: per verificare se un valore \u00e8 falso in un contesto booleano.<\/li>\n<li><code>toContain<\/code>: per verificare che un array contenga un valore.<\/li>\n<li><code>toThrow<\/code>: per verificare che una funzione invocata lanci un errore.<\/li>\n<li><code>stringContaining<\/code>: per verificare che una stringa contenga una sottostringa.<\/li>\n<\/ul>\n<p>Vediamo alcuni esempi di utilizzo di questi matcher.<\/p>\n<p>Per esempio, potreste aspettarvi che una funzione o un codice restituisca un oggetto con propriet\u00e0 e valori specifici.<\/p>\n<ol start=\"1\">\n<li>Usate lo snippet di codice qui sotto per testare questa funzionalit\u00e0. In questo caso, volete verificare che l&#8217;oggetto restituito sia uguale all&#8217;oggetto previsto.<\/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>Questo esempio usa <code>toBe<\/code>. Il test fallisce perch\u00e9 questo matcher non controlla l&#8217;uguaglianza profonda: controlla il valore, non tutte le propriet\u00e0.<\/p>\n<ol start=\"2\">\n<li>Usate il matcher <code>toEqual<\/code> per verificare l&#8217;uguaglianza profonda:<\/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>Questo test viene superato perch\u00e9 entrambi gli oggetti sono &#8220;profondamente uguali&#8221;, ovvero tutte le loro propriet\u00e0 sono uguali.<\/p>\n<ol start=\"3\">\n<li>Provate un altro esempio di matcher che verifica se l&#8217;array definito contiene un elemento specifico.<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect([\"orange\", \"pear\", \"apple\"]).toContain(\"mango\")<\/code><\/pre>\n<p>Questo test fallisce perch\u00e9 <code>toContain<\/code> afferma che l&#8217;array <code>[\"orange\", \"pear\", \"apple\"]<\/code> contiene il valore atteso <code>\"mango\"<\/code>, ma l&#8217;array non lo contiene.<\/p>\n<ol start=\"4\">\n<li>Usate le variabili per lo stesso test del codice sottostante:<\/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>Testare il codice asincrono<\/h3>\n<p>Finora abbiamo testato il codice sincrono, cio\u00e8 espressioni che restituiscono un valore prima che il codice esegua la riga successiva. Potete usare Jest anche per il codice asincrono con <code>async<\/code>, <code>await<\/code> o Promises.<\/p>\n<p>Per esempio, il file<strong> apis.js<\/strong> contiene una funzione per effettuare una <a href=\"https:\/\/kinsta.com\/it\/blog\/richieste-http-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">richiesta 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 funzione <code>getTodos<\/code> invia una richiesta <code>GET<\/code> a <code>https:\/\/jsonplaceholder.typicode.com\/todos\/1<\/code>.<\/p>\n<ol start=\"1\">\n<li>Create un file chiamato <strong>apis.test.js<\/strong> con il seguente codice per testare la <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">finta 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\t.then((response) = &gt; {\n  \treturn response.json()\n\t})\n\t.then((data) = &gt; {\n  \texpect(data).toHaveProperty('userId')\n  \texpect(data).toHaveProperty('id')\n  \texpect(data).toHaveProperty('title')\n  \texpect(data).toHaveProperty('completed')\n  \texpect(data).toHaveProperty('description')\n\t})\n})<\/code><\/pre>\n<p>Questo caso di test invoca la funzione <code>getTodos<\/code> che recupera un oggetto <code>todo<\/code>. Quando risolve la Promise, usa il metodo <code>.then<\/code> per ottenere il valore risolto.<\/p>\n<p>In questo valore, il codice restituisce <code>response.json()<\/code>, che \u00e8 un&#8217;altra Promise che converte la risposta in formato JSON. Un altro metodo <code>.then<\/code> ottiene l&#8217;oggetto JSON contenente <code>expect<\/code> e i matcher. Il codice afferma che l&#8217;oggetto JSON include cinque propriet\u00e0: <code>userId<\/code>, <code>id<\/code>, <code>title<\/code>, <code>completed<\/code> e <code>description<\/code>.<\/p>\n<ol start=\"2\">\n<li>Eseguire i test:<\/li>\n<\/ol>\n<figure>\n<p><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=\"Il risultato del test Jest mostra un fallimento per il test \"gets a todo object with the right properties\" in apis.test.js. Il risultato mostra che la propriet\u00e0 prevista \"description\" non esiste sull'oggetto.\" width=\"1197\" height=\"794\"><figcaption class=\"wp-caption-text\">Il risultato del test Jest mostra un test fallito per il codice asincrono.<\/figcaption><\/figure><\/figure>\n<p>Come mostra lo screenshot, il test per <code>getTodos()<\/code> fallisce. Si aspetta la propriet\u00e0 <code>description<\/code>, ma l&#8217;API non la restituisce. Grazie a queste informazioni, potete chiedere al team di gestione delle API della vostra azienda di includere questa propriet\u00e0 se l&#8217;applicazione ne ha bisogno o di aggiornare i test per soddisfare la risposta dell&#8217;API.<\/p>\n<ol start=\"3\">\n<li>Rimuovete l&#8217;asserzione per la propriet\u00e0 <code>description<\/code> e rieseguite i test:<\/li>\n<\/ol>\n<figure>\n<p><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=\"Il risultato del test Jest mostra che \u00e8 stato superato il test \"truncates a string correctly\" in string-format.test.js e \"ottiene un oggetto todo con le giuste propriet\u00e0\" in apis.test.js.\" width=\"1198\" height=\"397\"><figcaption class=\"wp-caption-text\">Il risultato del test Jest mostra un test superato per il codice asincrono.<\/figcaption><\/figure><\/figure>\n<p>Lo screenshot mostra che tutto ha superato il test.<\/p>\n<ol start=\"4\">\n<li>Ora provate a usare <code>async\/await<\/code> invece della tradizionale gestione di Promise:<\/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>La parola chiave <code>async<\/code> si trova ora prima della funzione. Il codice usa <code>await<\/code> prima di <code>getTodos()<\/code> e <code>await<\/code> prima di <code>response.json()<\/code>.<\/p>\n<h2>Caratteristiche avanzate di Jest<\/h2>\n<h3>Funzioni e moduli mock<\/h3>\n<p>Quando scrivete i test, potreste voler testare un&#8217;espressione con dipendenze esterne. In alcuni casi, soprattutto nei test unitari, i test unitari devono essere isolati dagli effetti esterni. In questo caso, potete fare il mock delle vostre funzioni o dei vostri moduli con Jest per controllare meglio i vostri test.<\/p>\n<ol start=\"1\">\n<li>Per esempio, consideriamo un file <strong>functions.js<\/strong> che contiene il seguente codice:<\/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\tcallback()\n  }\n}<\/code><\/pre>\n<p>La funzione <code>multipleCalls<\/code> viene eseguita in base al valore di <code>count<\/code>. Essa dipende dalla funzione di callback, la dipendenza esterna. Il suo scopo \u00e8 sapere se <code>multipleCalls<\/code> esegue correttamente la dipendenza esterna.<\/p>\n<ol start=\"2\">\n<li>Per simulare la dipendenza esterna e monitorare lo stato della dipendenza nel vostro file di test, <strong>functions.test.js<\/strong>, usate questo codice:<\/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\tmockFunction.mock.calls.length\n  ).toBe(5)\n})<\/code><\/pre>\n<p>Qui, il metodo <code>fn<\/code> dell&#8217;oggetto <code>jest<\/code> crea una funzione mock. Poi, il codice esegue <code>multipleCalls<\/code> passando <code>5<\/code> e la funzione mock come argomenti. Quindi, afferma che <code>mockFunction<\/code> viene chiamato cinque volte. La propriet\u00e0 <code>mock<\/code> contiene informazioni su come il codice chiama la funzione e sui valori restituiti.<\/p>\n<ol start=\"3\">\n<li>Quando si esegue il test, questo \u00e8 il risultato atteso:<\/li>\n<\/ol>\n<figure>\n<p><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=\"Il risultato del test Jest mostra che i tre test sono stati superati: \"truncates a string correctly\", \"functions are called multiple times correctly\" e \"gets a todo object with the right properties\"\" width=\"1191\" height=\"465\"><figcaption class=\"wp-caption-text\">Risultato del test Jest con una funzione mock.<\/figcaption><\/figure><\/figure>\n<p>Come dimostrato, il codice chiama il sito <code>mockFunction<\/code> cinque volte.<\/p>\n<p>Nel codice, la funzione mock imita una dipendenza esterna. Non importa quale sia la dipendenza esterna quando l&#8217;applicazione usa <code>multipleCalls<\/code> in produzione. Al vostro test unitario non interessa come funziona la dipendenza esterna. Verifica solo che <code>multipleCalls<\/code> funzioni come previsto.<\/p>\n<ol start=\"4\">\n<li>Per simulare i moduli, usate il metodo <code>mock<\/code> e passate un percorso di file, che \u00e8 il modulo:<\/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>Questo codice imita tutte le funzioni che <strong>string-format.js<\/strong> esporta e tiene traccia della frequenza con cui le chiama. La funzione <code>truncate<\/code> del modulo diventa una funzione mock, che fa perdere alla funzione la sua logica originale. Potete scoprire quante volte <code>truncate<\/code> viene eseguito nei vostri test nella propriet\u00e0 <code>truncate.mock.calls.length<\/code>.<\/p>\n<p>Se vedete un errore o il vostro codice non funziona, confrontatelo con l&#8217;<a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">implementazione completa<\/a>.<\/p>\n<h2>Testare i componenti React con Jest e la libreria di test React<\/h2>\n<p>Se non avete gi\u00e0 un progetto da seguire in questo tutorial, potete usare <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\" target=\"_blank\" rel=\"noopener noreferrer\">questo progetto di esempio React<\/a> come punto di partenza. Il branch <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> vi aiuta a iniziare a comporre il codice mentre seguite il tutorial. Usate il <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/main\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>main<\/code><\/a> come riferimento per fare un controllo incrociato tra il vostro codice e il codice completo di questo tutorial.<\/p>\n<p>Potete usare Jest per testare framework JavaScript come <a href=\"https:\/\/kinsta.com\/it\/argomenti\/react\/\">React<\/a>. Quando create progetti React con <a href=\"https:\/\/create-react-app.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create React App<\/a>, questi supportano la React Testing Library e Jest. Se create un progetto React senza Create React App, installate Jest per testare React con Babel e la <a href=\"https:\/\/github.com\/kentcdodds\/react-testing-library\" target=\"_blank\" rel=\"noopener noreferrer\">libreria di testing React<\/a>. Se clonate il ramo <code>starter-app<\/code>, non dovrete installare le dipendenze o applicare le configurazioni.<\/p>\n<ol start=\"1\">\n<li>Se state usando il progetto di esempio, usate questo comando per installare le dipendenze necessarie:<\/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>Potete anche usare <a href=\"https:\/\/www.npmjs.com\/package\/enzyme\" target=\"_blank\" rel=\"noopener noreferrer\">Enzyme<\/a> al posto di React Testing Library.<\/p>\n<ol start=\"2\">\n<li>Aggiornate le configurazioni di Babel in <strong>babel.config.js <\/strong>o create questo file se non esiste:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">module.exports = {\n  presets: [\n\t'@babel\/preset-env',\n  \t['@babel\/preset-react', {runtime: 'automatic'}],\n  ],\n};<\/code><\/pre>\n<ol start=\"3\">\n<li>Considerate il file <strong>src\/SubmitButton.js <\/strong>che ha il seguente codice:<\/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\tsetisLoading(true)\n\tonSubmit()\n  }\n\n  return <button disabled=\"disabled\" data-testid=\"{id}\"><\/button><\/code><\/pre>\n<p>Questo componente <code>SubmitButton<\/code> riceve tre prop:<\/p>\n<ul>\n<li><code>id<\/code>: l&#8217;identificatore del pulsante.<\/li>\n<li><code>label<\/code>: il testo da rendere nel pulsante.<\/li>\n<li><code>onSubmit<\/code>: quale funzione attivare quando qualcuno fa clic sul pulsante.<\/li>\n<\/ul>\n<p>Il codice assegna il prop <code>id<\/code> all&#8217;attributo <code>data-testid<\/code>, che identifica un elemento da testare.<\/p>\n<p>Il componente tiene traccia anche dello stato <code>isLoading<\/code> e lo aggiorna a <code>true<\/code> quando qualcuno fa clic sul pulsante.<\/p>\n<ol start=\"4\">\n<li>Create il test per questo componente. Inserite il seguente codice nel file <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\t&lt;SubmitButton\n  \tid=\"submit-details\"\n  \tlabel=\"Submit\"\n  \tonSubmit={submitMock}\n\t\/ &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>Il codice precedente esegue il rendering del componente <code>SubmitButton<\/code> e usa il metodo di interrogazione <code>screen.getByTestId<\/code> per ottenere il nodo DOM in base all&#8217;attributo <code>data-testid<\/code>.<\/p>\n<p>Il primo <code>expect<\/code> \u00e8 <code>getByTestId(\"submit-details\")<\/code> e usa il modificatore <code>not<\/code> e il matcher <code>toBeDisabled<\/code> (esposto da <code>react-testing-library<\/code>) per affermare che il pulsante non \u00e8 disabilitato. Usate il modificatore <code>not<\/code> con ogni matcher per affermare il contrario del matcher.<\/p>\n<p>Quindi il codice lancia l&#8217;evento <code>submit<\/code> sul componente e verifica che il pulsante sia disabilitato. Potete trovare altri matcher personalizzati nella <a href=\"https:\/\/github.com\/testing-library\/jest-dom#custom-matchers\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione della libreria di test<\/a>.<\/p>\n<ol start=\"5\">\n<li>Ora eseguite i test. Se avete clonato il branch <code>starter-files<\/code>, assicuratevi di aver installato tutte le dipendenze del progetto eseguendo <code>npm install<\/code> prima di iniziare i test.<\/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=\"Il truncates a string correctly\", \"functions are called multiple times correctly\", \"gets a todo object with the right properties\" e \"SubmitButton becomes disabled after click\"\" width=\"941\" height=\"353\"><figcaption class=\"wp-caption-text\">Il risultato del test Jest mostra che il test di un componente react \u00e8 stato superato.<\/figcaption><\/figure><\/figure>\n<h3>Eseguire i report di copertura del codice<\/h3>\n<p>Jest offre anche dei report sulla copertura del codice per mostrare la parte del progetto che state testando.<\/p>\n<ol start=\"1\">\n<li>Passate l&#8217;opzione <code>--coverage<\/code> a Jest. Nello script Jest in <strong>package.json <\/strong>(nel progetto JavaScript), aggiornate il comando Jest con questa opzione di copertura:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest --coverage\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>Eseguite <code>npm run test<\/code> per testare il vostro codice. Otterrete un report come il seguente:<\/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-coverage-report.png\" alt=\"Il risultato del test Jest mostra la copertura dei quattro test. Il risultato mostra che \"SubmitButton.js\" ha una copertura del 100%, mentre string-format.js ha una copertura del 76,92%.\" width=\"1183\" height=\"631\"><figcaption class=\"wp-caption-text\">Report di copertura Jest di successo per ogni suite di test.<\/figcaption><\/figure><\/figure>\n<p>Questo report mostra che Jest ha testato il 100% delle funzioni in <strong>SubmitButton.js<\/strong> e <strong>string-format.js<\/strong>. Indica inoltre che Jest non ha testato nessuna istruzione e nessuna riga di <strong>string-format.js<\/strong>. La copertura dei test mostra che le linee scoperte in <strong>string-format.js<\/strong> sono 7 e 12.Alla riga 7, <code>return str<\/code> nella funzione <code>truncate<\/code> non viene eseguito perch\u00e9 la condizione <code>if (str.length &lt;= count)<\/code> restituisce <code>false<\/code>.<\/p>\n<p>Alla riga 12, sempre nella funzione <code>truncate<\/code>, <code>return substring<\/code> non viene eseguito perch\u00e9 la condizione <code>if (!withEllipsis)<\/code> ritorna <code>false.<\/code><\/p>\n<h2>Integrare Jest con il vostro workflow di sviluppo<\/h2>\n<p>Vediamo come integrare questi test per migliorare il vostro workflow di sviluppo.<\/p>\n<h3>Eseguire i test in modalit\u00e0 Watch<\/h3>\n<p>Invece di eseguire manualmente i test, potete eseguirli automaticamente quando modificate il codice usando la modalit\u00e0 di osservazione.<\/p>\n<ol start=\"1\">\n<li>Per abilitare la modalit\u00e0 di osservazione, aggiornate il vostro script di comando Jest in <strong>package.json <\/strong>(nel progetto JavaScript) aggiungendo l&#8217;opzione <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>Eseguite <code>npm run test<\/code>. Attivate Jest in modalit\u00e0 watch:<\/li>\n<\/ol>\n<figure>\n<p><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=\"Jest in modalit\u00e0 watch, che mostra quattro test superati e anche un elenco di comandi da usare in modalit\u00e0 watch. Mostra il comando f, per eseguire solo i test falliti; o, per eseguire solo i test relativi ai file modificati; p, per filtrare in base a un pattern regex del nome del file; t, per filtrare in base a un pattern regex del nome del test; q per abbandonare la modalit\u00e0 watch; Enter, per attivare l'esecuzione di un test.\" width=\"1197\" height=\"730\"><figcaption class=\"wp-caption-text\">Esecuzione di Jest in modalit\u00e0 watch.<\/figcaption><\/figure><\/figure>\n<p>I test vengono eseguiti ogni volta che modificate il progetto. Questo approccio favorisce un feedback continuo durante la creazione dell&#8217;applicazione.<\/p>\n<h3>Impostare gli hook pre-commit<\/h3>\n<p>Negli ambienti Git, gli hook eseguono gli script ogni volta che si verifica un particolare evento (come un pull, un push o un commit). Gli hook di pre-commit definiscono quali script vengono eseguiti per l&#8217;evento di pre-commit (che il codice attiva prima di effettuare un commit).<\/p>\n<p>Il commit va a buon fine solo se lo script non lancia un errore.<\/p>\n<p>L&#8217;esecuzione di Jest prima del pre-commit assicura che nessuno dei vostri test fallisca prima del commit.<\/p>\n<p>Potete usare diverse librerie per impostare gli hook di git nel vostro progetto, come per esempio <a href=\"https:\/\/www.npmjs.com\/package\/ghooks\" target=\"_blank\" rel=\"noopener noreferrer\">ghooks<\/a>.<\/p>\n<ol start=\"1\">\n<li>Installate <code>ghooks<\/code> sotto <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>Aggiungete un oggetto <code>configs<\/code> nel livello superiore del vostro file <strong>package.json<\/strong> (nel progetto JavaScript).<\/li>\n<li>Aggiungete un oggetto <code>ghooks<\/code> sotto <code>configs<\/code>.<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Aggiungete una propriet\u00e0 con una chiave di <code>pre-commit<\/code> e un valore di <code>jest<\/code>.<\/li>\n<\/ol>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"config\": {\n\t\"ghooks\": {\n  \t\"pre-commit\": \"jest\"\n\t}\n  },\n}<\/code><\/pre>\n<ol start=\"5\">\n<li>Eseguite il commit del codice. Il codice attiva l&#8217;hook pre-commit, che esegue 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=\"Esecuzione di Jest durante una fase di pre-commit. Quando si esegue un commit usando git commit -m sul terminale, Jest viene eseguito e vengono visualizzati i risultati dei test.\" width=\"1183\" height=\"803\"><figcaption class=\"wp-caption-text\">Eseguire Jest durante il pre-commit usando i ghook.<\/figcaption><\/figure><\/figure>\n<h2>Riepilogo<\/h2>\n<p>Ora sapete come integrare Jest nel vostro flusso di sviluppo per eseguirlo automaticamente ogni volta che apportate una modifica. Questo approccio fornisce un feedback continuo che vi permette di correggere rapidamente eventuali problemi del codice prima di rilasciare le modifiche in produzione.<\/p>\n<p><a href=\"https:\/\/sevalla.com\/application-hosting\/\">Ospitando la vostra applicazione con Kinsta<\/a>, potrete beneficiare di un&#8217;infrastruttura veloce e sicura, e distribuire i vostri progetti su un&#8217;infrastruttura costruita sulla rete Premium Tier di Google Cloud Platform e su macchine C2. Potrete scegliere tra 27 data center e un CDN abilitato HTTP\/3 con 300 PoPs.<\/p>\n<p>Restate al sicuro con la tecnologia dei container isolati, due firewall potenti e una protezione DDoS avanzata alimentata da Cloudflare. Inoltre, potete integrare le app o automatizzare i flussi di lavoro con l&#8217;<a href=\"https:\/\/kinsta.com\/it\/docs\/kinsta-api\/\">API di Kinsta<\/a>.<\/p>\n<p>Configurate Jest e consultate le risorse di Kinsta oggi stesso per <a href=\"https:\/\/kinsta.com\/javascript\/\">migliorare le vostre applicazioni JavaScript<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il testing del software \u00e8 fondamentale per garantire che le vostre applicazioni funzionino come previsto, soprattutto quando introducete delle modifiche. Individuare e correggere gli errori nelle &#8230;<\/p>\n","protected":false},"author":290,"featured_media":73031,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25918,25847],"class_list":["post-73030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-framework-javascript","topic-tutorial-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>Come testare le applicazioni con Jest - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.\" \/>\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\/it\/blog\/jest\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come testare le applicazioni con Jest\" \/>\n<meta property=\"og:description\" content=\"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/jest\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-13T09:40:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-28T11:20:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Come testare le applicazioni con Jest\",\"datePublished\":\"2023-09-13T09:40:45+00:00\",\"dateModified\":\"2023-09-28T11:20:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/\"},\"wordCount\":2957,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/jest\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/jest\/\",\"name\":\"Come testare le applicazioni con Jest - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg\",\"datePublished\":\"2023-09-13T09:40:45+00:00\",\"dateModified\":\"2023-09-28T11:20:33+00:00\",\"description\":\"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/jest\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jest\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Framework JavaScript\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/framework-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come testare le applicazioni con Jest\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come testare le applicazioni con Jest - Kinsta\u00ae","description":"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.","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\/it\/blog\/jest\/","og_locale":"it_IT","og_type":"article","og_title":"Come testare le applicazioni con Jest","og_description":"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.","og_url":"https:\/\/kinsta.com\/it\/blog\/jest\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-09-13T09:40:45+00:00","article_modified_time":"2023-09-28T11:20:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Marcia Ramos","Tempo di lettura stimato":"17 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/jest\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/jest\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Come testare le applicazioni con Jest","datePublished":"2023-09-13T09:40:45+00:00","dateModified":"2023-09-28T11:20:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/jest\/"},"wordCount":2957,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/jest\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/jest\/","url":"https:\/\/kinsta.com\/it\/blog\/jest\/","name":"Come testare le applicazioni con Jest - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg","datePublished":"2023-09-13T09:40:45+00:00","dateModified":"2023-09-28T11:20:33+00:00","description":"Esploriamo il popolare framework Jest, le sue caratteristiche e il modo migliore per integrarlo nel tuo workflow di sviluppo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/jest\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/jest\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/jest\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/09\/jest.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/jest\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Framework JavaScript","item":"https:\/\/kinsta.com\/it\/argomenti\/framework-javascript\/"},{"@type":"ListItem","position":3,"name":"Come testare le applicazioni con Jest"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/73030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=73030"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/73030\/revisions"}],"predecessor-version":[{"id":73365,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/73030\/revisions\/73365"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73030\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/73031"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=73030"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=73030"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=73030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}