JavaScriptille k\u00e4sikirjassa on sivu QUnit-testien<\/a> suorittamisesta, vaikka kyse on enemm\u00e4n JavaScript-koodin testaamisesta WordPress-ytimess\u00e4.<\/p>\n Vaikka mik\u00e4\u00e4n n\u00e4ist\u00e4 ei ole standardoitu JavaScriptille WordPressiss\u00e4, voimme kirjoittaa upeita yksikk\u00f6testej\u00e4 Jest-testausohjelmistolla. T\u00e4ss\u00e4 artikkelissa opimme kirjoittamaan JavaScript-yksikk\u00f6testej\u00e4 esimerkkilaajennukselle, joka lataa 5 viesti\u00e4 WP REST API:n Aiemmin JavaScript-yksikk\u00f6testien kirjoittamiseen sis\u00e4ltyi Mochan asettaminen suorittamaan testej\u00e4, Chai tekem\u00e4\u00e4n v\u00e4itteit\u00e4 ja Sinon pilkkaamaan toimintoja ja vakoilemaan niit\u00e4. Vaikka ne tarjoavat suurta joustavuutta, on paljon monimutkaisempaa ty\u00f6skennell\u00e4 kolmen paketin kuin yhden kanssa. Jest<\/a> tarjoaa kaiken t\u00e4m\u00e4n yhdess\u00e4 paketissa:<\/p>\n Jotta t\u00e4ss\u00e4 artikkelissa keskityt\u00e4\u00e4n testaamiseen Jestill\u00e4, testausprosessin ulkopuolisia lis\u00e4asetuksia, kuten Babel tai Webpack, ei k\u00e4sitell\u00e4 t\u00e4ss\u00e4. Kaikki t\u00e4m\u00e4 l\u00f6ytyy t\u00e4m\u00e4n artikkelin mukana tulevasta WP Jest Tests -repostiosta .<\/a> Jotta asiat pysyisiv\u00e4t asiayhteyden mukaisina, jokaisessa osiossa on linkki johonkin asiaankuuluvista tiedostoista, jotka kirjoitamme.<\/p>\n Esimerkkilaajennuksen PHP,<\/a> jota k\u00e4yt\u00e4mme JavaScript-yksikk\u00f6testien kirjoittamiseen, on melko vakio. Ainoat mielenkiintoiset rivit ovat ne, kun asetamme JavaScript-tiedostomme jonoon ja lis\u00e4\u00e4mme tekstin sis\u00e4isen komentosarjan muuttujien v\u00e4litt\u00e4miseksi sille:<\/p>\n JavaScript-tiedostomme kyselyn j\u00e4lkeen lis\u00e4\u00e4mme globaalin muuttujan Meid\u00e4n on ensin alustettava Muokkaa luotua paketti.json<\/a> – tiedostoa ja lis\u00e4\u00e4 uusi merkint\u00e4 suorittaaksesi testimme T\u00e4m\u00e4 on komento, jota k\u00e4yt\u00e4mme k\u00e4skem\u00e4\u00e4n Jesti\u00e4 suorittamaan JavaScript-yksikk\u00f6testit. T\u00e4m\u00e4 on kertak\u00e4ytt\u00f6inen, mutta Jest tukee my\u00f6s tiedostojen katselua, joten voit sy\u00f6tt\u00e4\u00e4 toisen:<\/p>\n Asenna nyt Jest kehitysriippuvuutena suorittamalla<\/p>\n Luo asennuksen aikana tiedosto nimelt\u00e4 K\u00e4yd\u00e4\u00e4n l\u00e4pi jokainen:<\/p>\n Huomasit varmasti viittauksen: t\u00e4m\u00e4 on erityinen merkki, jonka Jest korvaa projektisi juurella, joka on yleens\u00e4 Menemme perusteellisesti kahdessa seuraavassa osiossa, mutta luo ensin kansio ja n\u00e4m\u00e4 kaksi edell\u00e4 mainittua tiedostoa:<\/p>\n Jos k\u00e4yt\u00e4t Webpackia k\u00e4\u00e4nt\u00e4\u00e4ksesi kaiken, mukaan lukien tyylit, kuten t\u00e4m\u00e4n laajennuksen, ja tuot sinun on k\u00e4ytett\u00e4v\u00e4 styleMock.js<\/a> :\u00e4\u00e4 pilkataksesi SASS-tiedostoja, kun tuot ne JavaScript-tiedostoomme, muuten Jest kaatuu, koska se ei pysty ratkaisemaan moduulia. Et tarvitse paljon t\u00e4h\u00e4n tiedostoon, lis\u00e4\u00e4 vain<\/p>\n Jest k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 pilkkua joka kerta, kun se l\u00f6yt\u00e4\u00e4 Ty\u00f6stet\u00e4\u00e4n nyt globals.js-<\/a> tiedostoa. Yksi Jestin k\u00e4yt\u00f6n eduista on, ett\u00e4 se toimitetaan valmiiksi m\u00e4\u00e4ritetyn Luo kansio T\u00e4m\u00e4 ilmoittaa ja pilkaa joitain objekteja ja menetelmi\u00e4, joita k\u00e4yt\u00e4t my\u00f6hemmin testeiss\u00e4si. Viimeinen kiinnostaa erityisesti<\/p>\n T\u00e4m\u00e4 on globaali muuttuja, jonka kirjoitimme k\u00e4ytt\u00e4m\u00e4ll\u00e4 WordPress-laajennuksen kansiossa on yksi JavaScript-tiedosto main.js.<\/a> Aiot vied\u00e4 funktion, joka tekee kaiken ty\u00f6n:<\/p>\n joten voit k\u00e4ytt\u00e4\u00e4 sit\u00e4 testeiss\u00e4si Jestiss\u00e4.<\/p>\n Nyt voit aloittaa kokeiden kirjoittamisen! Jest voi l\u00f6yt\u00e4\u00e4 testej\u00e4 monella tavalla:<\/p>\n Luo Seuraavaksi tyhjenn\u00e4mme kaikki pilkat, joten emme koskaan juokse likaisten pilkkien kanssa, jotka sis\u00e4lt\u00e4v\u00e4t arvoja aikaisemmista testeist\u00e4. T\u00e4m\u00e4 voi johtaa virheisiin, koska esimerkiksi jos vakoilemme, kuinka monta kertaa pilkattua funktiota kutsuttiin, voimme saada virheellisen lukeman, jos emme poista pilaa testin ja testin v\u00e4lill\u00e4:<\/p>\n Ensimm\u00e4inen testi, jonka kirjoitamme, tekee perusv\u00e4itteit\u00e4, kun jotkut asiat ep\u00e4onnistuvat. Jos esimerkiksi globaalia T\u00e4ss\u00e4 koodissa<\/p>\n Ensimm\u00e4inen testi ei m\u00e4\u00e4rittele mit\u00e4\u00e4n, Toinen testi m\u00e4\u00e4rittelee Seuraava testisarja alkaa<\/p>\n ja t\u00e4m\u00e4n sis\u00e4ll\u00e4 meill\u00e4 on toinen purkaustoiminto:<\/p>\n toisin kuin t\u00e4m\u00e4, se suoritetaan, kun kaikki t\u00e4m\u00e4n lohkon Pilkkaamme ensimm\u00e4ist\u00e4 lupausta, joka ratkaisee vastauksen, ja toista tietojen JSON-esityst\u00e4 varten. N\u00e4m\u00e4 tiedot ovat samanlaisia \u200b\u200bkuin mit\u00e4 saamme WP REST API:sta. Koska koodimme tarvitsee vain otsikon ja linkin, pilkkaamme sit\u00e4.<\/p>\n Voimme nyt kirjoittaa testin k\u00e4ytt\u00e4m\u00e4ll\u00e4 pilkattua Heti alusta l\u00e4htien t\u00e4m\u00e4 on erilaista: nimet\u00f6n funktio Globaali Soitamme Loput ovat enemm\u00e4n v\u00e4itteit\u00e4, joilla varmistetaan, ett\u00e4 Nyt voit kirjoittaa<\/p>\n ja Jest suorittaa JavaScript-yksikk\u00f6testit WordPress-laajennuksellesi<\/p>\nfetch<\/code>kautta JavaScript-funktion avulla ja render\u00f6i ne tietyss\u00e4 DOM-elementiss\u00e4 sivulla.<\/p>\nJestin k\u00e4yt\u00f6n edut JavaScript-yksikk\u00f6testeiss\u00e4 WordPressiss\u00e4<\/h2>\n
\n
describe<\/code>ja it<\/code>taitest<\/code><\/li>\nexpect<\/code>ja -painikkeilla toBe<\/code>ja toHaveLength<\/code>monilla muilla<\/li>\nEnnen kuin jatkat<\/h3>\n
Yleiskatsaus PHP-puolelle<\/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>. wp_add_inline_script()<\/code>T\u00e4m\u00e4 muuttuja on erityisen mielenkiintoinen ja hankala k\u00e4sitell\u00e4, koska se on JavaScript-tiedostomme ulkopuolinen ja meid\u00e4n on pilkattava sit\u00e4 testeiss\u00e4mme.<\/p>\nM\u00e4\u00e4rit\u00e4 Jest-testit<\/h2>\n
npm<\/code>laajennusprojektimme, jotta voimme asentaa Jestin sen kanssa. Siirry komentorivill\u00e4 laajennuskansioosi ja suorita:<\/p>\nnpm init<\/code>ja k\u00e4y l\u00e4pi kehotteet t\u00e4\u00e4lt\u00e4<\/p>\nscripts<\/code>osiossa:<\/p>\n\"test\": \"jest\"<\/code><\/p>\n\"test-watch\": \"jest --watch\"<\/code><\/p>\nnpm install -D jest<\/code><\/p>\njest.config.js<\/code>. T\u00e4m\u00e4 s\u00e4ilytt\u00e4\u00e4 kaikki tarvittavat asetukset. Lis\u00e4\u00e4 seuraavat:<\/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>: osoittaa, tuleeko jokainen yksitt\u00e4inen testi raportoida ajon aikana. Kaikki virheet n\u00e4kyv\u00e4t my\u00f6s alareunassa suorituksen j\u00e4lkeen. Huomaa, ett\u00e4 jos k\u00e4ynniss\u00e4 on vain yksi testitiedosto, sen oletusarvo on true<\/code>.<\/li>\nsetupFiles<\/code>: luettelo poluista moduuleille, jotka suorittavat koodia testausymp\u00e4rist\u00f6n m\u00e4\u00e4ritt\u00e4miseksi tai m\u00e4\u00e4ritt\u00e4miseksi. Jokainen setupFile ajetaan kerran testitiedostoa kohden. Koska jokainen testi suoritetaan omassa ymp\u00e4rist\u00f6ss\u00e4\u00e4n, n\u00e4m\u00e4 skriptit suoritetaan testausymp\u00e4rist\u00f6ss\u00e4 v\u00e4litt\u00f6m\u00e4sti ennen itse testikoodin suorittamista. K\u00e4yt\u00e4mme t\u00e4t\u00e4 ilmoittamaan PHP:n ja WordPressin render\u00f6im\u00e4t globaalit muuttujat komennoilla, kuten wp_add_inline_script<\/code>tai wp_localize_script<\/code>.<\/li>\nmoduleNameMapper<\/code>: t\u00e4m\u00e4 on kartta s\u00e4\u00e4nn\u00f6llisist\u00e4 lausekkeista moduulien nimiin (tai moduulien nimien joukkoihin), joiden avulla voidaan poistaa staattiset resurssit, kuten kuvat tai tyylit yhdell\u00e4 moduulilla.<\/li>\n<\/ul>\npackage.json<\/code>.<\/p>\n\n
__mocks__<\/code><\/li>\nstyleMock.js<\/code>jaglobals.js<\/code><\/li>\n<\/ul>\nMock tyylien tuonti Jest-testej\u00e4 varten<\/h2>\n
.scss<\/code>tiedoston .js<\/code>tiedostoon:<\/p>\nimport '.\/main.scss';<\/code><\/pre>\n.scss<\/code>tuonnin, ja yhdist\u00e4\u00e4 ne malliin, jolloin voit siirty\u00e4 testeihin v\u00e4litt\u00e4m\u00e4tt\u00e4 tyyleist\u00e4.<\/p>\nAseta globaalit Jestille<\/h2>\n
jsdom<\/code>verkkostandardien puhtaan JavaScript-toteutuksen kanssa, joka simuloi DOM-ymp\u00e4rist\u00f6\u00e4 ik\u00e4\u00e4n kuin olisit selaimessa, ja k\u00e4yt\u00e4mme sit\u00e4 DOM-elementtien pilkkaamiseen. meid\u00e4n testej\u00e4 varten.<\/p>\n__mocks__<\/code>ja globals.js<\/code>tiedosto sen sis\u00e4\u00e4n. Lis\u00e4\u00e4 t\u00e4m\u00e4 tiedostoon:<\/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>. Sinun t\u00e4ytyy pilkata sit\u00e4 globaaliksi muuttujaksi, jotta voit k\u00e4ytt\u00e4\u00e4 sit\u00e4 testeiss\u00e4si.<\/p>\nJavaScript-tiedoston yleiskatsaus<\/h2>\n
\/src<\/code>T\u00e4m\u00e4 siirret\u00e4\u00e4n my\u00f6hemmin ja tulostetaan \/js\/front.js<\/code>tiedostoon, jonka PHP lataa. JavaScript lataa viisi WordPress-viesti\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 fetch<\/code>tavallista JavaScript-toimintoa WP REST API:n kautta ja lis\u00e4\u00e4 otsikon, jossa on linkki viestiin, div.entry-content<\/code>.<\/p>\nexport const wpJestTestsInit =() => {<\/code><\/pre>\nJavaScript-yksikk\u00f6testien kirjoittaminen Jestill\u00e4, vihdoin!<\/h2>\n
\n
test.js<\/code><\/li>\nmain.test.js<\/code><\/li>\n.js<\/code>tiedostoja, jotka sijaitsevat kansiossa nimelt\u00e4__tests__<\/code><\/li>\n<\/ul>\n__tests__<\/code>kansio ja sen sis\u00e4ll\u00e4 front.test.js<\/code>. N\u00e4et valmiin JavaScript-tiedoston Jest-testej\u00e4<\/a> varten t\u00e4ydent\u00e4v\u00e4ss\u00e4 repossa. K\u00e4yd\u00e4\u00e4n se l\u00e4pi lohkoissa. Ensimm\u00e4inen rivi tuo JS-tiedoston, jonka haluamme testata:<\/p>\nimport { wpJestTestsInit } from '..\/src\/main';<\/code><\/pre>\nafterEach(() => {\n jest.clearAllMocks();\n} );<\/code><\/pre>\nwpJestTests<\/code>muuttujaa, jolla kirjoitimme, wp_add_inline_script<\/code>ei kirjoitettu jostain syyst\u00e4:<\/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>luo ryhm\u00e4n, joka koostuu useista toisiinsa liittyvist\u00e4 testeist\u00e4<\/li>\ntest<\/code>on se, mik\u00e4 todella suorittaa testin<\/li>\nexpect<\/code>kaataa testikohdeemme tarjoamalla p\u00e4\u00e4syn useisiin "vastaaviin", joiden avulla voit tehd\u00e4 erilaisia \u200b\u200bv\u00e4itteit\u00e4 sen sis\u00e4ll\u00f6st\u00e4<\/li>\ntoBe<\/code>on yksi n\u00e4ist\u00e4 vastaajista. Jestiss\u00e4 on mukana<\/a> paljon vastaavia, ja on jopa muita, jotka voit lis\u00e4t\u00e4 kolmannen osapuolen paketilla<\/a>.<\/li>\n<\/ul>\nwpJestTests<\/code>joten sen arvo on se, mit\u00e4 m\u00e4\u00e4ritit kohdassa globals.js<\/code>. Koska se on undefined<\/code>, emme voi toimia, joten haluamme varmistaa, ett\u00e4 funktio palaa tekem\u00e4tt\u00e4 mit\u00e4\u00e4n.<\/p>\nwpJestTests<\/code>ja pilkkaa document.querySelector<\/code>palautusmenetelm\u00e4n, undefined<\/code>jonka se palauttaisi, jos se ei l\u00f6yd\u00e4 elementti\u00e4 DOM:sta. Siin\u00e4 tapauksessa haluamme vahvistaa, ett\u00e4 palaamme tekem\u00e4tt\u00e4 mit\u00e4\u00e4n ja ett\u00e4 funktiomme pilkkaaminen document.querySelector<\/code>kutsuttiin kerran.<\/p>\nMock fetch Jest-testeiss\u00e4<\/h2>\n
describe( 'Fetch posts', () => {<\/code><\/pre>\nafterAll( () => {\n global.fetch.mockClear();\n delete global.fetch;\n});<\/code><\/pre>\nafterEach<\/code>testit on suoritettu. describe<\/code>Koska JavaScript-tiedostomme fetch<\/code>lataa viestit, meid\u00e4n on varmistettava, ett\u00e4 sit\u00e4 kutsuttiin ja se palautti pyyt\u00e4m\u00e4mme, joten pilkkaamme fetch<\/code>toimintoa:<\/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>\nJavaScript-integraatiotesti Jestin kanssa asynkronisessa koodissa, joka k\u00e4ytt\u00e4\u00e4 noutoa<\/h2>\n
fetch<\/code>. T\u00e4ss\u00e4 testiss\u00e4 on suuri ero muihin JavaScript-yksikk\u00f6testeihin verrattuna: t\u00e4m\u00e4 on integrointitesti. T\u00e4ss\u00e4 tutkitut aiemmat testit yksinkertaisesti varmistivat, ett\u00e4 komponentti toimi hyvin. Tarkistimme, ett\u00e4 jos alkutilan globaalia muuttujaa ei ole m\u00e4\u00e4ritetty, komponenttimme ei hahmonnu. T\u00e4m\u00e4 on erilainen, koska aiomme testata, kuinka koko j\u00e4rjestelm\u00e4 toimii, kun alkutilamuuttuja on m\u00e4\u00e4ritetty, k\u00e4ynnist\u00e4en n\u00e4in datatapahtuman ja lis\u00e4\u00e4m\u00e4ll\u00e4 lopuksi viestien otsikot linkkeineen dokumenttiin.<\/p>\ntest<\/code>vastaanottaa done<\/code>parametrin. T\u00e4m\u00e4 on itse asiassa funktio, jota kutsutaan, kun lopetamme testin. Jest odottaa, kunnes h\u00e4nt\u00e4 done<\/code>kutsutaan ennen testin suorittamista. Jos done<\/code>sit\u00e4 ei koskaan kutsuta, testi ep\u00e4onnistuu aikakatkaisuvirheen vuoksi. Se on meille mielenkiintoista, koska testaamme koodia fetch<\/code>, joka sis\u00e4lt\u00e4\u00e4 asynkronisen funktion.<\/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>on m\u00e4\u00e4ritelty ja pilkattu document.querySelector<\/code>nyt palauttaa sen, mik\u00e4 muistuttaa HTML-elementti\u00e4, parillinen classList<\/code>ja sen add<\/code>alimetodi.<\/p>\nwpJestTestsInit<\/code>ja odotamme sen p\u00e4\u00e4ttyv\u00e4n oikein. Nyt, koska fetch<\/code>se on asynkroninen, aiomme hy\u00f6dynt\u00e4\u00e4 process.nextTick<\/code>Node.js :<\/a> sta. Node.js: nextTick<\/code>ss\u00e4 on jono, joka suoritetaan sen j\u00e4lkeen, kun kaikki nykyisen tapahtumasilmukan tapahtumat on suoritettu. T\u00e4m\u00e4 on hienoa, koska kaikki lupauksemme ratkaistaan \u200b\u200bsilloin, mik\u00e4 on juuri sit\u00e4, mit\u00e4 tarvitsemme testataksemme t\u00e4t\u00e4 koodia, johon sis\u00e4ltyy fetch<\/code>.<\/p>\nquerySelector<\/code>l\u00f6ytyi jotain ty\u00f6stett\u00e4v\u00e4\u00e4, jota fetch<\/code>todellakin kutsuttiin, ett\u00e4 luokka lis\u00e4ttiin luetteloon ja ett\u00e4 viestiemme otsikot ja linkit lis\u00e4ttiin vastaavaan HTML-elementtiin. Kun kaikki on tehty, soitamme done<\/code>ja asynkroninen testimme p\u00e4\u00e4ttyy.<\/p>\nSuorita Jest-testit<\/h2>\n
npm run test<\/code><\/p>\n
![\"Helpot](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157897-61e6c3c169e87.png\")
<\/a><\/p>\n