F\u00f6r JavaScript finns det en sida om att k\u00f6ra QUnit-tester<\/a> i handboken, \u00e4ven om det handlar mer om att testa JavaScript-koden i WordPress-k\u00e4rnan.<\/p>\n \u00c4ven om inget av detta \u00e4r standardiserat f\u00f6r JavaScript i WordPress, kan vi skriva fantastiska enhetstester med hj\u00e4lp av Jests testsvit. I den h\u00e4r artikeln l\u00e4r vi oss hur man skriver JavaScript-enhetstester f\u00f6r ett exempelplugin som laddar 5 inl\u00e4gg genom WP REST API med hj\u00e4lp av Tidigare innebar att skriva JavaScript-enhetstester att st\u00e4lla in Mocha f\u00f6r att k\u00f6ra tester, Chai f\u00f6r att g\u00f6ra p\u00e5st\u00e5enden och Sinon f\u00f6r att h\u00e5na funktioner och spionera p\u00e5 dem. \u00c4ven om de erbjuder stor flexibilitet \u00e4r det mycket mer komplicerat att arbeta med tre paket \u00e4n ett. Jest<\/a> tillhandah\u00e5ller allt detta i ett enda paket:<\/p>\n F\u00f6r att h\u00e5lla den h\u00e4r artikeln fokuserad p\u00e5 att testa med Jest, finns det ytterligare inst\u00e4llningar utanf\u00f6r testprocessen som Babel eller Webpack som inte kommer att t\u00e4ckas h\u00e4r. Allt detta kan hittas i WP Jest Tests repo<\/a> som medf\u00f6ljer den h\u00e4r artikeln. F\u00f6r att h\u00e5lla saker kontextuella kommer varje avsnitt att l\u00e4nka till en av de relevanta filerna som vi kommer att skriva.<\/p>\n PHP f\u00f6r exemplet plugin<\/a> som vi kommer att anv\u00e4nda f\u00f6r att l\u00e4ra oss hur man skriver JavaScript-enhetstesten \u00e4r ganska standard. De enda intressanta raderna \u00e4r de n\u00e4r vi st\u00e4ller v\u00e5r JavaScript-fil i k\u00f6 och l\u00e4gger till ett inline-skript f\u00f6r att skicka variabler till den:<\/p>\n Efter att ha s\u00f6kt v\u00e5r JavaScript-fil l\u00e4gger vi till en global variabel Vi m\u00e5ste f\u00f6rst initiera Redigera filen package.json<\/a> som skapades och l\u00e4gg till en ny post f\u00f6r att k\u00f6ra v\u00e5ra tester i Detta kommer att vara kommandot vi kommer att anv\u00e4nda f\u00f6r att ber\u00e4tta f\u00f6r Jest att k\u00f6ra v\u00e5ra JavaScript-enhetstester. Detta \u00e4r en eng\u00e5ngsk\u00f6rning, men Jest st\u00f6der ocks\u00e5 filvisning, s\u00e5 du kan ange ytterligare en:<\/p>\n Installera nu Jest som ett utvecklingsberoende genom att k\u00f6ra<\/p>\n Medan den installeras skapar du en fil med namnet L\u00e5t oss g\u00e5 igenom var och en:<\/p>\n Du har s\u00e4kert m\u00e4rkt referensen: detta \u00e4r en speciell token som ers\u00e4tts av Jest med roten till ditt projekt, vilket vanligtvis \u00e4r platsen f\u00f6r din Vi kommer att g\u00e5 p\u00e5 djupet i de kommande tv\u00e5 avsnitten men skapa f\u00f6rst mappen och dessa tv\u00e5 filer som refereras till ovan:<\/p>\n Om du, som detta plugin, anv\u00e4nder Webpack f\u00f6r att kompilera allt inklusive stilar och du importerar du m\u00e5ste anv\u00e4nda styleMock.js<\/a> f\u00f6r att h\u00e5na SASS-filer n\u00e4r du importerar dem i v\u00e5r JavaScript-fil, annars kommer Jest att krascha eftersom det inte kommer att kunna l\u00f6sa modulen. Du beh\u00f6ver inte mycket f\u00f6r den h\u00e4r filen, l\u00e4gg bara till<\/p>\n Jest kommer att anv\u00e4nda denna mock varje g\u00e5ng den hittar en L\u00e5t oss arbeta nu i filen globals.js<\/a>. En av f\u00f6rdelarna med att anv\u00e4nda Jest \u00e4r att den redan levereras med en redan konfigurerad Skapa en mapp Detta kommer att f\u00f6rklara och h\u00e5na vissa objekt och metoder som du senare kommer att anv\u00e4nda i dina tester. Den sista \u00e4r av s\u00e4rskilt intresse<\/p>\n Det h\u00e4r \u00e4r den globala variabeln vi skrev med WordPress-pluginet har en enda JavaScript-fil main.js<\/a> i en Du kommer att exportera funktionen som g\u00f6r allt:<\/p>\n s\u00e5 att du kan anv\u00e4nda den i dina tester i Jest.<\/p>\n Nu kan du b\u00f6rja skriva prov! Jest kan hitta tester p\u00e5 m\u00e5nga s\u00e4tt:<\/p>\n Skapa D\u00e4refter rensar vi alla h\u00e5nar, s\u00e5 vi k\u00f6r aldrig med smutsiga h\u00e5nar som b\u00e4r v\u00e4rden fr\u00e5n tidigare tester. Att g\u00f6ra detta kan leda till fel eftersom till exempel, om vi spionerar p\u00e5 hur m\u00e5nga g\u00e5nger en h\u00e5nad funktion anropades, kan vi f\u00e5 en felaktig l\u00e4sning om vi inte rensar h\u00e5net mellan test och test:<\/p>\n Det f\u00f6rsta testet vi kommer att skriva, g\u00f6r grundl\u00e4ggande p\u00e5st\u00e5enden n\u00e4r vissa saker misslyckas. Till exempel, om den globala I den h\u00e4r koden,<\/p>\n Det f\u00f6rsta testet definierar inget f\u00f6r Det andra testet definierar N\u00e4sta upps\u00e4ttning tester b\u00f6rjar med<\/p>\n och inuti detta har vi en annan rivningsfunktion:<\/p>\n unlike Vi h\u00e5nar det f\u00f6rsta l\u00f6ftet som l\u00f6ser svaret och det andra till en JSON-representation av data. Dessa data liknar vad vi f\u00e5r fr\u00e5n WP REST API. Med tanke p\u00e5 att v\u00e5r kod bara beh\u00f6ver titeln och l\u00e4nken, h\u00e5nar vi det.<\/p>\n Vi kan nu skriva testet med den mocked Redan fr\u00e5n b\u00f6rjan \u00e4r detta annorlunda: den anonyma funktionen som skickas till Det globala Vi ringer Resten \u00e4r fler p\u00e5st\u00e5enden f\u00f6r att s\u00e4kerst\u00e4lla att vi Nu kan du skriva<\/p>\n och Jest kommer att k\u00f6ra JavaScript-enhetstesten f\u00f6r ditt WordPress-plugin<\/p>\nfetch<\/code>funktionen fr\u00e5n JavaScript och renderar dem i ett visst DOM-element p\u00e5 sidan.<\/p>\nF\u00f6rdelar med att anv\u00e4nda Jest f\u00f6r JavaScript-enhetstester i WordPress<\/h2>\n
\n
describe<\/code>och it<\/code>ellertest<\/code><\/li>\nexpect<\/code>och toBe<\/code>och toHaveLength<\/code>m\u00e5nga fler<\/li>\nInnan du g\u00e5r vidare<\/h3>\n
\u00d6versikt \u00f6ver PHP-sidan<\/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>med wp_add_inline_script()<\/code>. Den h\u00e4r variabeln \u00e4r s\u00e4rskilt intressant och sv\u00e5r att hantera eftersom den \u00e4r extern till v\u00e5r JavaScript-fil och vi m\u00e5ste h\u00e5na den i v\u00e5ra tester.<\/p>\nSt\u00e4ll in Jest-tester<\/h2>\n
npm<\/code>i v\u00e5rt plugin-projekt f\u00f6r att kunna installera Jest med det. Navigera i kommandoraden till din plugin-mapp och k\u00f6r:<\/p>\nnpm init<\/code>och g\u00e5 igenom serien med uppmaningar h\u00e4r<\/p>\nscripts<\/code>avsnittet:<\/p>\n\"test\": \"jest\"<\/code><\/p>\n\"test-watch\": \"jest --watch\"<\/code><\/p>\nnpm install -D jest<\/code><\/p>\njest.config.js<\/code>. Detta kommer att h\u00e5lla all n\u00f6dv\u00e4ndig konfiguration. L\u00e4gg till f\u00f6ljande:<\/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>: indikerar om varje enskilt test ska rapporteras under k\u00f6rningen. Alla fel kommer ocks\u00e5 fortfarande att visas l\u00e4ngst ner efter k\u00f6rning. Observera att om det bara finns en testfil som k\u00f6rs \u00e4r den som standard true<\/code>.<\/li>\nsetupFiles<\/code>: en lista \u00f6ver s\u00f6kv\u00e4gar till moduler som k\u00f6r n\u00e5gon kod f\u00f6r att konfigurera eller st\u00e4lla in testmilj\u00f6n. Varje setupFile kommer att k\u00f6ras en g\u00e5ng per testfil. Eftersom varje test k\u00f6rs i sin egen milj\u00f6, kommer dessa skript att k\u00f6ras i testmilj\u00f6n omedelbart innan sj\u00e4lva testkoden k\u00f6rs. Vi kommer att anv\u00e4nda detta f\u00f6r att deklarera globala variabler renderade av PHP och WordPress med kommandon som wp_add_inline_script<\/code>eller wp_localize_script<\/code>.<\/li>\nmoduleNameMapper<\/code>: det h\u00e4r \u00e4r en karta fr\u00e5n regulj\u00e4ra uttryck till modulnamn (eller arrayer av modulnamn) som g\u00f6r att statiska resurser, som bilder eller stilar, kan f\u00f6rsvinna med en enda modul.<\/li>\n<\/ul>\npackage.json<\/code>.<\/p>\n\n
__mocks__<\/code><\/li>\nstyleMock.js<\/code>ochglobals.js<\/code><\/li>\n<\/ul>\nMock stilar importeras f\u00f6r Jest-tester<\/h2>\n
.scss<\/code>filen i .js<\/code>filen:<\/p>\nimport '.\/main.scss';<\/code><\/pre>\n.scss<\/code>import och kommer att mappa dem till mock, s\u00e5 att du kan g\u00e5 vidare med tester utan att bry dig om stilarna.<\/p>\nKonfigurera globaler f\u00f6r Jest<\/h2>\n
jsdom<\/code>, en ren JavaScript-implementering av webbstandarder, som simulerar en DOM-milj\u00f6 som om du var i webbl\u00e4saren, och vi kommer att anv\u00e4nda den f\u00f6r att h\u00e5na DOM-element f\u00f6r v\u00e5ra tester.<\/p>\n__mocks__<\/code>och en globals.js<\/code>fil i den. L\u00e4gg till detta i filen:<\/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>. Du m\u00e5ste h\u00e5na den som en global variabel f\u00f6r att kunna anv\u00e4nda den i dina tester.<\/p>\n\u00d6versikt \u00f6ver JavaScript-filen<\/h2>\n
\/src<\/code>mapp. Detta transpileras senare och matas ut i en \/js\/front.js<\/code>fil som \u00e4r vad PHP kommer att ladda. JavaScript laddar fem WordPress-inl\u00e4gg med fetch<\/code>, en standard JavaScript-funktion, genom WP REST API och infogar dess titel, med en l\u00e4nk till inl\u00e4gget, i en div.entry-content<\/code>.<\/p>\nexport const wpJestTestsInit =() => {<\/code><\/pre>\nSkriver JavaScript-enhetstester med Jest, \u00e4ntligen!<\/h2>\n
\n
test.js<\/code><\/li>\nmain.test.js<\/code><\/li>\n.js<\/code>filer som finns i en mapp med namnet__tests__<\/code><\/li>\n<\/ul>\n__tests__<\/code>mappen och inuti den, en front.test.js<\/code>. Du kan se den f\u00e4rdiga JavaScript-filen f\u00f6r Jest-testerna<\/a> i f\u00f6ljeslagaren. L\u00e5t oss g\u00e5 igenom det i block. Den f\u00f6rsta raden importerar JS-filen som vi vill testa:<\/p>\nimport { wpJestTestsInit } from '..\/src\/main';<\/code><\/pre>\nafterEach(() => {\n jest.clearAllMocks();\n} );<\/code><\/pre>\nwpJestTests<\/code>variabeln som vi skrev med wp_add_inline_script<\/code>inte skrevs av n\u00e5gon anledning:<\/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>skapar en grupp som best\u00e5r av flera relaterade tester<\/li>\ntest<\/code>\u00e4r det som faktiskt utf\u00f6r ett test<\/li>\nexpect<\/code>omsluter v\u00e5rt test\u00e4mne och ger tillg\u00e5ng till ett antal "matchare" som l\u00e5ter dig g\u00f6ra olika p\u00e5st\u00e5enden om dess inneh\u00e5ll<\/li>\ntoBe<\/code>\u00e4r en av dessa matchare. Jest har m\u00e5nga matchare inkluderade<\/a>, och det finns \u00e4ven andra som du kan l\u00e4gga till med ett tredjepartspaket<\/a>.<\/li>\n<\/ul>\nwpJestTests<\/code>s\u00e5 dess v\u00e4rde kommer att vara det du definierade i globals.js<\/code>. Eftersom det \u00e4r undefined<\/code>, kan vi inte arbeta s\u00e5 vi vill bekr\u00e4fta att funktionen returnerar utan att g\u00f6ra n\u00e5got.<\/p>\nwpJestTests<\/code>och h\u00e5nar document.querySelector<\/code>metoden att returnera undefined<\/code>vilket \u00e4r vad det skulle returnera om det inte kunde hitta ett element i DOM. I s\u00e5dana fall vill vi bekr\u00e4fta att vi \u00e5terv\u00e4nder utan att g\u00f6ra n\u00e5got, och att v\u00e5r funktion mocking document.querySelector<\/code>anropades en g\u00e5ng.<\/p>\nMock apport i Jest-tester<\/h2>\n
describe( 'Fetch posts', () => {<\/code><\/pre>\nafterAll( () => {\n global.fetch.mockClear();\n delete global.fetch;\n});<\/code><\/pre>\nafterEach<\/code>this kommer att k\u00f6ras efter att alla tester i detta describe<\/code>block har k\u00f6rts. Eftersom v\u00e5r JavaScript-fil anv\u00e4nder fetch<\/code>f\u00f6r att ladda inl\u00e4ggen m\u00e5ste vi verifiera att den anropades och att den returnerade det vi beg\u00e4rde, s\u00e5 vi kommer att h\u00e5na fetch<\/code>funktionen:<\/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-integreringstest med Jest i asynkron kod som anv\u00e4nder h\u00e4mta<\/h2>\n
fetch<\/code>. Det finns en stor skillnad med detta test j\u00e4mf\u00f6rt med de andra JavaScript-enhetstesten: det h\u00e4r \u00e4r ett integrationstest. Tidigare tester som utforskats h\u00e4r s\u00e4kerst\u00e4llde helt enkelt att en komponent fungerade bra. Vi kontrollerade att om den globala initialvariabeln inte var definierad, skulle v\u00e5r komponent inte \u00e5terges. Detta \u00e4r annorlunda eftersom vi kommer att testa hur hela systemet fungerar n\u00e4r den initiala tillst\u00e5ndsvariabeln \u00e4r definierad, vilket utl\u00f6ser en datatransaktion och slutligen infogar inl\u00e4ggets rubriker med deras l\u00e4nkar i dokumentet.<\/p>\ntest<\/code>tar emot en done<\/code>parameter. Detta \u00e4r faktiskt en funktion som kommer att anropas n\u00e4r vi avslutar testet. Jest kommer att v\u00e4nta tills done<\/code>det anropas innan testet avslutas. Om done<\/code>aldrig anropas kommer testet att misslyckas med ett timeout-fel. Det \u00e4r intressant f\u00f6r oss eftersom vi testar kod som involverar fetch<\/code>, som \u00e4r en asynkron 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>\u00e4r definierat och v\u00e5r mocked document.querySelector<\/code>returnerar nu vad som liknar ett HTML-element, med j\u00e4mn classList<\/code>och dess add<\/code>underordnade metod.<\/p>\nwpJestTestsInit<\/code>och f\u00f6rv\u00e4ntar oss att det slutar p\u00e5 r\u00e4tt s\u00e4tt. Nu, eftersom fetch<\/code>det \u00e4r asynkront, kommer vi att anv\u00e4nda process.nextTick<\/code>fr\u00e5n Node.js<\/a>. I nextTick<\/code>Node.js \u00e4r k\u00f6n som kommer att k\u00f6ras efter att alla h\u00e4ndelser i den aktuella h\u00e4ndelseslingan har avslutats. Detta \u00e4r bra eftersom alla v\u00e5ra l\u00f6ften skulle vara l\u00f6sta d\u00e5, vilket \u00e4r precis vad vi beh\u00f6ver f\u00f6r att testa den h\u00e4r koden som involverar fetch<\/code>.<\/p>\nquerySelector<\/code>hittat n\u00e5got att arbeta med, som fetch<\/code>verkligen hette, att en klass lades till i listan och att rubrikerna och l\u00e4nkarna till v\u00e5ra inl\u00e4gg infogades i motsvarande HTML-element. N\u00e4r allt \u00e4r klart ringer vi done<\/code>och v\u00e5rt asynkrona test slutar.<\/p>\nK\u00f6r dina Jest-tester<\/h2>\n
npm run test<\/code><\/p>\n
![\"Enkla](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157897-61e6c3c169e87.png\")
<\/a><\/p>\n