Per JavaScript, c’\u00e8 una pagina sull’esecuzione dei test QUnit<\/a> nel Manuale, anche se si tratta pi\u00f9 di testare il codice JavaScript nel core di WordPress.<\/p>\n Sebbene nulla di tutto ci\u00f2 sia standardizzato per JavaScript in WordPress, possiamo scrivere ottimi unit test utilizzando la suite di test Jest. In questo articolo impareremo come scrivere unit test JavaScript per un plug-in di esempio che carica 5 post tramite l’API REST di WP utilizzando la In passato, la scrittura di unit test JavaScript implicava l’impostazione di Mocha per eseguire test, Chai per fare asserzioni e Sinon per deridere le funzioni e spiarle. Sebbene offrano una grande flessibilit\u00e0, \u00e8 molto pi\u00f9 complesso lavorare con tre pacchetti rispetto a uno. Jest<\/a> fornisce tutto questo in un unico pacchetto:<\/p>\n Per mantenere questo articolo incentrato sui test con Jest, c’\u00e8 una configurazione aggiuntiva esterna al processo di test come Babel o Webpack che non sar\u00e0 trattata qui. Tutto questo pu\u00f2 essere trovato nel repository WP Jest Tests<\/a> che accompagna questo articolo. Per mantenere le cose contestuali, ogni sezione si collegher\u00e0 a uno dei file rilevanti che scriveremo.<\/p>\n Il PHP per il plugin di esempio<\/a> che useremo per imparare a scrivere gli unit test JavaScript \u00e8 abbastanza standard. Le uniche righe interessanti sono quelle in cui accodiamo il nostro file JavaScript e aggiungiamo uno script inline per passarci variabili:<\/p>\n Dopo aver inserito il nostro file JavaScript, aggiungiamo una variabile globale Dovremo prima inizializzare Modifica il file package.json<\/a> che \u00e8 stato creato e aggiungi una nuova voce per eseguire i nostri test nella Questo sar\u00e0 il comando che useremo per dire a Jest di eseguire i nostri unit test JavaScript. Questa \u00e8 una corsa una tantum, ma Jest supporta anche il monitoraggio dei file, quindi puoi inserirne uno aggiuntivo:<\/p>\n Ora installa Jest come dipendenza di sviluppo eseguendo<\/p>\n Durante l’installazione, crea un file denominato Esaminiamo ciascuno di essi:<\/p>\n Hai sicuramente notato il riferimento: questo \u00e8 un token speciale che viene sostituito da Jest con la radice del tuo progetto, che di solito \u00e8 la posizione del tuo Approfondiremo nelle prossime due sezioni, ma prima creiamo la cartella e questi due file a cui si fa riferimento sopra:<\/p>\n Se, come questo plugin, usi Webpack per compilare tutto, inclusi gli stili e stai importando il \u00e8 necessario utilizzare styleMock.js<\/a> per deridere i file SASS durante l’importazione nel nostro file JavaScript, altrimenti Jest si arrester\u00e0 in modo anomalo poich\u00e9 non sar\u00e0 in grado di risolvere il modulo. Non hai bisogno di molto per questo file, basta aggiungere<\/p>\n Jest utilizzer\u00e0 questo mock ogni volta che trova Lavoriamo ora nel file globals.js<\/a>. Uno dei vantaggi dell’utilizzo di Jest \u00e8 che viene gi\u00e0 fornito con un Crea una cartella Questo dichiarer\u00e0 e derider\u00e0 alcuni oggetti e metodi che utilizzerai in seguito nei tuoi test. L’ultimo \u00e8 di particolare interesse<\/p>\n Questa \u00e8 la variabile globale che abbiamo scritto usando Il plugin di WordPress ha un unico file JavaScript main.js<\/a> in una Stai per esportare la funzione che fa tutto il lavoro:<\/p>\n quindi puoi usarlo nei tuoi test in Jest.<\/p>\n Ora puoi iniziare a scrivere i test! Jest pu\u00f2 trovare i test in molti modi:<\/p>\n Crea la Successivamente, cancelliamo tutti i mock, quindi non corriamo mai con mock sporchi che trasportano i valori dei test precedenti. Ci\u00f2 pu\u00f2 portare a errori poich\u00e9, ad esempio, se stiamo spiando quante volte \u00e8 stata chiamata una funzione presa in giro, potremmo ottenere una lettura errata se non cancelliamo la simulazione tra test e test:<\/p>\n Il primo test che scriveremo, fa affermazioni di base quando alcune cose falliscono. Ad esempio, se la variabile globale In questo codice,<\/p>\n Il primo test non sta definendo nulla Il secondo test definisce La prossima serie di test inizia con<\/p>\n e all’interno di questo, abbiamo un’altra funzione di smontaggio:<\/p>\n a differenza Prendiamo in giro la prima Promise che risolve la risposta e la seconda una rappresentazione JSON dei dati. Questi dati sono simili a quelli che otteniamo dall’API REST di WP. Dato che il nostro codice ha bisogno solo del titolo e del collegamento, lo stiamo prendendo in giro.<\/p>\n Ora possiamo scrivere il test usando il mocked Fin dall’inizio \u00e8 diverso: la funzione anonima passata a Il globale Chiamiamo Il resto sono altre affermazioni per garantire che sia stato Ora puoi digitare<\/p>\n e Jest eseguir\u00e0 gli unit test JavaScript per il tuo plugin WordPress<\/p>\nfetch<\/code>funzione di JavaScript e li rende in un determinato elemento DOM nella pagina.<\/p>\nVantaggi dell’utilizzo di Jest per i test unitari JavaScript in WordPress<\/h2>\n
\n
describe<\/code>e it<\/code>otest<\/code><\/li>\nexpect<\/code>e toBe<\/code>, toHaveLength<\/code>e molti altri<\/li>\nPrima di andare avanti<\/h3>\n
Panoramica del lato PHP<\/h2>\n
$initial_state = rawurlencode( wp_json_encode( array(\n 'restUrl' => esc_url_raw( rest_url() ),\n 'posts' => 5,)) );\nwp_enqueue_script( \n 'wp-jest-tests',\n plugins_url( 'front.js', __FILE__ ),\n array(),\n $plugin_version,\n true\n);\nwp_add_inline_script(\n 'wp-jest-tests',\n 'window.wpJestTests = JSON.parse(decodeURIComponent(\"'. $initial_state. '\"));',\n 'before'\n);<\/code><\/pre>\nwpJestTests<\/code>con wp_add_inline_script()<\/code>. Questa variabile \u00e8 particolarmente interessante e difficile da gestire perch\u00e9 \u00e8 esterna al nostro file JavaScript e dovremo prenderla in giro nei nostri test.<\/p>\nImposta i test Jest<\/h2>\n
npm<\/code>nel nostro progetto di plugin per poter installare Jest con esso. Passare dalla riga di comando alla cartella del plug-in ed eseguire:<\/p>\nnpm init<\/code>e segui la serie di prompt qui<\/p>\nscripts<\/code>sezione:<\/p>\n\"test\": \"jest\"<\/code><\/p>\n\"test-watch\": \"jest --watch\"<\/code><\/p>\nnpm install -D jest<\/code><\/p>\njest.config.js<\/code>. Questo manterr\u00e0 tutta la configurazione necessaria. Aggiungi quanto segue:<\/p>\nmodule.exports = {\n verbose: true,\n setupFiles: [\n '\/__mocks__\/globals.js'\n ],\n moduleNameMapper: {\n '.(css|less|sass|scss)$': '\/__mocks__\/styleMock.js'\n }\n};<\/code><\/pre>\n\n
verbose<\/code>: indica se ogni singolo test deve essere riportato durante la corsa. Tutti gli errori verranno visualizzati anche in basso dopo l’esecuzione. Si noti che se viene eseguito un solo file di test, il valore predefinito \u00e8 true<\/code>.<\/li>\nsetupFiles<\/code>: un elenco di percorsi di moduli che eseguono del codice per configurare o impostare l’ambiente di test. Ogni setupFile verr\u00e0 eseguito una volta per file di test. Poich\u00e9 ogni test viene eseguito nel proprio ambiente, questi script verranno eseguiti nell’ambiente di test immediatamente prima dell’esecuzione del codice di test stesso. Lo useremo per dichiarare le variabili globali rese da PHP e WordPress con comandi come wp_add_inline_script<\/code>o wp_localize_script<\/code>.<\/li>\nmoduleNameMapper<\/code>: questa \u00e8 una mappa da espressioni regolari a nomi di moduli (o array di nomi di moduli) che consentono di stubout risorse statiche, come immagini o stili con un singolo modulo.<\/li>\n<\/ul>\npackage.json<\/code>.<\/p>\n\n
__mocks__<\/code><\/li>\nstyleMock.js<\/code>eglobals.js<\/code><\/li>\n<\/ul>\nImportazione di stili fittizi per i test Jest<\/h2>\n
.scss<\/code>file nel .js<\/code>file:<\/p>\nimport '.\/main.scss';<\/code><\/pre>\n.scss<\/code>un’importazione e li mapper\u00e0 al mock, permettendoti di andare avanti con i test senza preoccuparti degli stili.<\/p>\nImposta globali per Jest<\/h2>\n
jsdom<\/code>, un’implementazione JavaScript puro degli standard Web gi\u00e0 configurata, che simula un ambiente DOM come se fossi nel browser e lo useremo per deridere gli elementi DOM per i nostri test<\/p>\n__mocks__<\/code>e un globals.js<\/code>file al suo interno. Aggiungi questo al file:<\/p>\nimport { JSDOM } from 'jsdom';\nconst dom = new JSDOM();\nglobal.document = dom.window.document;\nglobal.window = dom.window;\nglobal.window.wpJestTests = undefined;<\/code><\/pre>\nglobal.window.wpJestTests = undefined;<\/code><\/pre>\nwp_add_inline_script<\/code>. Devi prenderlo in giro come una variabile globale per poterlo utilizzare nei tuoi test.<\/p>\nPanoramica del file JavaScript<\/h2>\n
\/src<\/code>cartella. Questo viene successivamente traspilato e prodotto in un \/js\/front.js<\/code>file che \u00e8 ci\u00f2 che il PHP caricher\u00e0. Il JavaScript carica cinque post di WordPress utilizzando fetch<\/code>, una funzione JavaScript standard, tramite l’API REST di WP e inserisce il suo titolo, con un collegamento al post, in un file div.entry-content<\/code>.<\/p>\nexport const wpJestTestsInit =() => {<\/code><\/pre>\nScrivere test unitari JavaScript con Jest, finalmente!<\/h2>\n
\n
test.js<\/code><\/li>\nmain.test.js<\/code><\/li>\n.js<\/code>file che si trovano in una cartella denominata__tests__<\/code><\/li>\n<\/ul>\n__tests__<\/code>cartella e al suo interno, un file front.test.js<\/code>. Puoi vedere il file JavaScript finito per i test Jest<\/a> nel repository complementare. Esaminiamolo a blocchi. La prima riga importa il file JS che vogliamo testare:<\/p>\nimport { wpJestTestsInit } from '..\/src\/main';<\/code><\/pre>\nafterEach(() => {\n jest.clearAllMocks();\n} );<\/code><\/pre>\nwpJestTests<\/code>con cui stavamo scrivendo wp_add_inline_script<\/code>non \u00e8 stata scritta per nessun motivo:<\/p>\ndescribe( 'Initialization', () => {\n test( 'if wpJestTests is undefined, nothing happens', () => {\n expect( wpJestTestsInit() ).toBe( false );\n } );\n\n test( 'if .entry-content is missing, nothing happens', () => {\n wpJestTests = { posts: 5 };\n const mockQuerySelector = jest.spyOn( document, 'querySelector') .mockImplementation( () => undefined );\n expect( wpJestTestsInit() ).toBe( false );\n expect( mockQuerySelector ).toHaveBeenCalledTimes( 1 );\n } );\n} );<\/code><\/pre>\n\n
describe<\/code>crea un gruppo composto da diversi test correlati<\/li>\ntest<\/code>\u00e8 ci\u00f2 che esegue effettivamente un test<\/li>\nexpect<\/code>avvolge il nostro soggetto di test fornendo accesso a una serie di "corrispondenti" che ti consentono di fare affermazioni diverse sul suo contenuto<\/li>\ntoBe<\/code>\u00e8 uno di questi abbinamenti. Jest ha molti abbinatori inclusi<\/a> e ce ne sono anche altri che puoi aggiungere con un pacchetto di terze parti<\/a>.<\/li>\n<\/ul>\nwpJestTests<\/code>, quindi il suo valore sar\u00e0 quello che hai definito in globals.js<\/code>. Poich\u00e9 \u00e8 undefined<\/code>, non possiamo lavorare, quindi vogliamo confermare che la funzione ritorna senza fare nulla.<\/p>\nwpJestTests<\/code>e prende in giro il document.querySelector<\/code>metodo da restituire undefined<\/code>che \u00e8 ci\u00f2 che restituirebbe se non riuscisse a trovare un elemento nel DOM. In tal caso, vogliamo confermare che stiamo tornando senza fare nulla e che la nostra funzione mocking document.querySelector<\/code>\u00e8 stata chiamata una volta.<\/p>\nRecupero fittizio nei test di Jest<\/h2>\n
describe( 'Fetch posts', () => {<\/code><\/pre>\nafterAll( () => {\n global.fetch.mockClear();\n delete global.fetch;\n});<\/code><\/pre>\nafterEach<\/code>di questo, verr\u00e0 eseguito dopo che tutti i test all’interno di questo describe<\/code>blocco sono stati eseguiti. Poich\u00e9 il nostro file JavaScript utilizza fetch<\/code>per caricare i post, dobbiamo verificare che sia stato chiamato e abbia restituito ci\u00f2 che abbiamo richiesto, quindi prenderemo in giro la fetch<\/code>funzione:<\/p>\nglobal.fetch = jest.fn().mockImplementation(\n () => Promise.resolve({\n ok: true,\n status: 200,\n json: () => Promise.resolve( [\n {\n link: 'test-1',\n title: { rendered: 'Post 1' }\n },\n {\n link: 'test-2',\n title: { rendered: 'Post 2' }\n },\n {\n link: 'test-3',\n title: { rendered: 'Post 3' }\n },\n {\n link: 'test-4',\n title: { rendered: 'Post 4' }\n },\n {\n link: 'test-5',\n title: { rendered: 'Post 5' }\n },\n ] ),\n })\n);<\/code><\/pre>\nTest di integrazione JavaScript con Jest in codice asincrono che utilizza fetch<\/h2>\n
fetch<\/code>. C’\u00e8 una grande differenza con questo test rispetto agli altri unit test JavaScript: questo \u00e8 un test di integrazione. I test precedenti esaminati qui hanno semplicemente assicurato che un componente funzionasse bene. Abbiamo verificato che se la variabile globale dello stato iniziale non fosse stata definita, il nostro componente non sarebbe stato visualizzato. Questo \u00e8 diverso perch\u00e9 testeremo come funziona l’intero sistema quando viene definita la variabile di stato iniziale, avviando cos\u00ec una transazione di dati e infine inserendo i titoli dei post con i relativi collegamenti nel documento.<\/p>\ntest<\/code>riceve un done<\/code>parametro. Questa \u00e8 in realt\u00e0 una funzione che verr\u00e0 chiamata al termine del test. Jest aspetter\u00e0 fino a quando non done<\/code>verr\u00e0 chiamato prima di terminare il test. Se done<\/code>non viene mai chiamato, il test fallir\u00e0 con un errore di timeout. Questo \u00e8 interessante per noi poich\u00e9 stiamo testando il codice che coinvolge fetch<\/code>, che \u00e8 una funzione asincrona.<\/p>\ntest( 'if posts are fetch, inserts them', done => {\n wpJestTests = { posts: 5 };\n const mockClassListAdd = jest.fn();\n const divElem = {\n tagName: 'DIV',\n classList: { add: mockClassListAdd },\n innerHTML: ''\n };\n const mockQuerySelector = jest.spyOn( document, 'querySelector') .mockImplementation( () => divElem );\n\n expect( wpJestTestsInit() ).toBe( true );\n\n process.nextTick(() => {\n expect( mockQuerySelector ).toHaveBeenCalledTimes( 1 );\n expect( global.fetch ).toHaveBeenCalledTimes( 1 );\n expect( mockClassListAdd ).toHaveBeenCalledTimes( 1 );\n expect( divElem.innerHTML.match( \/test-[1-5]\/g ).length ).toBe( 5 );\n\n done();\n });\n} );<\/code><\/pre>\nwpJestTests<\/code>\u00e8 definito e il nostro mocked document.querySelector<\/code>ora restituisce ci\u00f2 che assomiglia a un elemento HTML, con anche classList<\/code>e il suo add<\/code>metodo figlio.<\/p>\nwpJestTestsInit<\/code>e ci aspettiamo che finisca correttamente. Ora, poich\u00e9 fetch<\/code>\u00e8 asincrono, utilizzeremo<\/a>process.nextTick<\/code> Node.js. In Node.js \u00e8 la coda che verr\u00e0 eseguita al termine di tutti gli eventi nel ciclo di eventi corrente. Questo \u00e8 fantastico perch\u00e9 tutte le nostre promesse verrebbero risolte, che \u00e8 esattamente ci\u00f2 di cui abbiamo bisogno per testare questo codice che coinvolge .<\/a>nextTick``fetch<\/code><\/p>\nquerySelector<\/code>trovato qualcosa con cui lavorare, che fetch<\/code>sia stato effettivamente chiamato, che una classe sia stata aggiunta all’elenco e che i titoli e i collegamenti dei nostri post siano stati inseriti nell’elemento HTML corrispondente. Una volta fatto tutto, chiamiamo done<\/code>e il nostro test asincrono termina.<\/p>\nEsegui i tuoi test Jest<\/h2>\n
npm run test<\/code><\/p>\n
![\"Semplici](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157897-61e6c3c169e87.png\")
<\/a><\/p>\n