Pour JavaScript, il y a une page sur l’ex\u00e9cution des tests QUnit<\/a> dans le manuel, bien qu’il s’agisse davantage de tester le code JavaScript dans le noyau de WordPress.<\/p>\n Bien que rien de tout cela ne soit standardis\u00e9 pour JavaScript dans WordPress, nous pouvons \u00e9crire d’excellents tests unitaires \u00e0 l’aide de la suite de tests Jest. Dans cet article, nous allons apprendre \u00e0 \u00e9crire des tests unitaires JavaScript pour un exemple de plugin qui charge 5 messages via l’API WP REST en utilisant la Dans le pass\u00e9, \u00e9crire des tests unitaires JavaScript impliquait de configurer Mocha pour ex\u00e9cuter des tests, Chai pour faire des assertions et Sinon pour simuler des fonctions et les espionner. Bien qu’ils offrent une grande flexibilit\u00e9, il est beaucoup plus complexe de travailler avec trois packages qu’avec un seul. Jest<\/a> fournit tout cela dans un seul package\u00a0:<\/p>\n Afin de garder cet article concentr\u00e9 sur les tests avec Jest, il existe une configuration suppl\u00e9mentaire externe au processus de test comme Babel ou Webpack qui ne sera pas couverte ici. Tout cela se trouve dans le repo WP Jest Tests<\/a> qui accompagne cet article. Pour garder les choses contextuelles, chaque section sera li\u00e9e \u00e0 l’un des fichiers pertinents que nous \u00e9crirons.<\/p>\n Le PHP du plugin d’exemple<\/a> que nous allons utiliser pour apprendre \u00e0 \u00e9crire les tests unitaires JavaScript est assez standard. Les seules lignes int\u00e9ressantes sont celles o\u00f9 nous mettons en file d’attente notre fichier JavaScript et ajoutons un script en ligne pour lui transmettre des variables\u00a0:<\/p>\n Apr\u00e8s avoir enqu\u00eat\u00e9 notre fichier JavaScript, nous ajoutons une variable globale Nous devrons d’abord initialiser Modifiez le fichier package.json<\/a> qui a \u00e9t\u00e9 cr\u00e9\u00e9 et ajoutez une nouvelle entr\u00e9e pour ex\u00e9cuter nos tests dans la Ce sera la commande que nous utiliserons pour dire \u00e0 Jest d’ex\u00e9cuter nos tests unitaires JavaScript. Il s’agit d’une ex\u00e9cution unique, mais Jest prend \u00e9galement en charge la surveillance des fichiers, vous pouvez donc en saisir une suppl\u00e9mentaire\u00a0:<\/p>\n Installez maintenant Jest en tant que d\u00e9pendance de d\u00e9veloppement en ex\u00e9cutant<\/p>\n Pendant l’installation, cr\u00e9ez un fichier nomm\u00e9 Passons en revue chacun\u00a0:<\/p>\n Vous avez s\u00fbrement remarqu\u00e9 la r\u00e9f\u00e9rence: il s’agit d’un jeton sp\u00e9cial qui est remplac\u00e9 par Jest par la racine de votre projet, qui est g\u00e9n\u00e9ralement l’emplacement de votre fichier Nous irons en profondeur dans les deux sections suivantes, mais d’abord, cr\u00e9ez le dossier et ces deux fichiers r\u00e9f\u00e9renc\u00e9s ci-dessus\u00a0:<\/p>\n Si, comme ce plugin, vous utilisez Webpack pour tout compiler y compris les styles et que vous importez le vous devez utiliser styleMock.js<\/a> pour simuler les fichiers SASS lors de leur importation dans notre fichier JavaScript, sinon Jest se bloquera car il ne pourra pas r\u00e9soudre le module. Vous n’avez pas besoin de beaucoup pour ce fichier, ajoutez simplement<\/p>\n Jest utilisera cette maquette chaque fois qu’il trouvera une Travaillons maintenant dans le fichier globals.js<\/a>. L’un des avantages de l’utilisation de Jest, c’est qu’il est d\u00e9j\u00e0 livr\u00e9 avec un d\u00e9j\u00e0 configur\u00e9 Cr\u00e9ez un dossier Cela d\u00e9clarera et simulera certains objets et m\u00e9thodes que vous utiliserez plus tard dans vos tests. Le dernier est particuli\u00e8rement int\u00e9ressant<\/p>\n C’est la variable globale que nous avons \u00e9crite en utilisant Le plugin WordPress a un seul fichier JavaScript main.js<\/a> dans un Vous allez exporter la fonction qui fait tout le travail\u00a0:<\/p>\n afin que vous puissiez l’utiliser dans vos tests dans Jest.<\/p>\n Vous pouvez maintenant commencer \u00e0 \u00e9crire des tests\u00a0! Jest peut trouver des tests de plusieurs mani\u00e8res\u00a0:<\/p>\n Cr\u00e9ez le Ensuite, nous effa\u00e7ons tous les mocks, donc nous ne courons jamais avec des mocks sales portant des valeurs de tests pr\u00e9c\u00e9dents. Cela peut entra\u00eener des erreurs car, par exemple, si nous espionnons le nombre de fois qu’une fonction simul\u00e9e a \u00e9t\u00e9 appel\u00e9e, nous pourrions obtenir une lecture incorrecte si nous n’effa\u00e7ons pas la simulation entre test et test\u00a0:<\/p>\n Le premier test que nous \u00e9crirons, fait des assertions de base lorsque certaines choses \u00e9chouent. Par exemple, si la variable globale Dans ce code,<\/p>\n Le premier test ne d\u00e9finit rien pour Le deuxi\u00e8me test d\u00e9finit La prochaine s\u00e9rie de tests commence par<\/p>\n et \u00e0 l’int\u00e9rieur, nous avons une autre fonction de d\u00e9montage\u00a0:<\/p>\n contrairement \u00e0 Nous nous moquons de la premi\u00e8re Promise qui se r\u00e9sout \u00e0 la r\u00e9ponse, et la seconde \u00e0 une repr\u00e9sentation JSON des donn\u00e9es. Ces donn\u00e9es sont similaires \u00e0 celles que nous obtenons de l’API WP REST. \u00c9tant donn\u00e9 que notre code n’a besoin que du titre et du lien, nous nous moquons de cela.<\/p>\n Nous pouvons maintenant \u00e9crire le test en utilisant le mocked D\u00e8s le d\u00e9but, c’est diff\u00e9rent: la fonction anonyme pass\u00e9e \u00e0 Le global Nous appelons Les autres sont plus des assertions pour s’assurer Maintenant, vous pouvez taper<\/p>\n et Jest ex\u00e9cutera les tests unitaires JavaScript pour votre plugin WordPress<\/p>\nfetch<\/code>fonction de JavaScript et les restitue dans un certain \u00e9l\u00e9ment DOM de la page.<\/p>\nAvantages de l’utilisation de Jest pour les tests unitaires JavaScript dans WordPress<\/h2>\n
\n
describe<\/code>et it<\/code>outest<\/code><\/li>\nexpect<\/code>et toBe<\/code>, toHaveLength<\/code>et bien d’autres<\/li>\nAvant d’avancer<\/h3>\n
Vue d’ensemble du c\u00f4t\u00e9 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>avec wp_add_inline_script()<\/code>. Cette variable est particuli\u00e8rement int\u00e9ressante et d\u00e9licate \u00e0 g\u00e9rer car elle est externe \u00e0 notre fichier JavaScript et nous devrons nous en moquer dans nos tests.<\/p>\nMettre en place des tests Jest<\/h2>\n
npm<\/code>notre projet de plugin pour pouvoir installer Jest avec. Naviguez dans la ligne de commande jusqu’au dossier de votre plugin et ex\u00e9cutez\u00a0:<\/p>\nnpm init<\/code>et passez par la s\u00e9rie d’invites ici<\/p>\nscripts<\/code>section\u00a0:<\/p>\n\"test\": \"jest\"<\/code><\/p>\n\"test-watch\": \"jest --watch\"<\/code><\/p>\nnpm install -D jest<\/code><\/p>\njest.config.js<\/code>. Cela contiendra toute la configuration n\u00e9cessaire. Ajoutez ce qui suit\u00a0:<\/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>: indique si chaque test individuel doit \u00eatre signal\u00e9 pendant l’ex\u00e9cution. Toutes les erreurs seront \u00e9galement toujours affich\u00e9es en bas apr\u00e8s l’ex\u00e9cution. Notez que s’il n’y a qu’un seul fichier de test en cours d’ex\u00e9cution, il est par d\u00e9faut true<\/code>.<\/li>\nsetupFiles<\/code>: une liste de chemins vers des modules qui ex\u00e9cutent du code pour configurer ou mettre en place l’environnement de test. Chaque setupFile sera ex\u00e9cut\u00e9 une fois par fichier de test. \u00c9tant donn\u00e9 que chaque test s’ex\u00e9cute dans son propre environnement, ces scripts seront ex\u00e9cut\u00e9s dans l’environnement de test imm\u00e9diatement avant d’ex\u00e9cuter le code de test lui-m\u00eame. Nous l’utiliserons pour d\u00e9clarer des variables globales rendues par PHP et WordPress avec des commandes telles que wp_add_inline_script<\/code>ou wp_localize_script<\/code>.<\/li>\nmoduleNameMapper<\/code>: il s’agit d’un mappage d’expressions r\u00e9guli\u00e8res vers des noms de modules (ou des tableaux de noms de modules) qui permettent de supprimer des ressources statiques, comme des images ou des styles avec un seul module.<\/li>\n<\/ul>\npackage.json<\/code>.<\/p>\n\n
__mocks__<\/code><\/li>\nstyleMock.js<\/code>etglobals.js<\/code><\/li>\n<\/ul>\nImportation de styles fictifs pour les tests Jest<\/h2>\n
.scss<\/code>fichier dans le .js<\/code>fichier :<\/p>\nimport '.\/main.scss';<\/code><\/pre>\n.scss<\/code>importation et les mappera sur la maquette, vous permettant d’avancer avec des tests sans vous soucier des styles.<\/p>\nConfigurer des globales pour Jest<\/h2>\n
jsdom<\/code>, une impl\u00e9mentation en pur JavaScript des standards Web, qui simule un environnement DOM comme si vous \u00e9tiez dans le navigateur, et nous l’utiliserons pour simuler des \u00e9l\u00e9ments DOM pour nos essais.<\/p>\n__mocks__<\/code>et un globals.js<\/code>fichier \u00e0 l’int\u00e9rieur. Ajoutez ceci au fichier\u00a0:<\/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>. Vous devez le simuler en tant que variable globale pour pouvoir l’utiliser dans vos tests.<\/p>\nPr\u00e9sentation du fichier JavaScript<\/h2>\n
\/src<\/code>dossier. Ceci est ensuite transpil\u00e9 et sorti dans un \/js\/front.js<\/code>fichier qui est ce que le PHP va charger. Le JavaScript charge cinq publications WordPress \u00e0 l’aide fetch<\/code>de, une fonction JavaScript standard, via l’API WP REST et ins\u00e8re son titre, avec un lien vers la publication, dans un fichier div.entry-content<\/code>.<\/p>\nexport const wpJestTestsInit =() => {<\/code><\/pre>\n\u00c9crire des tests unitaires JavaScript avec Jest, enfin !<\/h2>\n
\n
test.js<\/code><\/li>\nmain.test.js<\/code><\/li>\n.js<\/code>de fichiers situ\u00e9s dans un dossier nomm\u00e9__tests__<\/code><\/li>\n<\/ul>\n__tests__<\/code>dossier et \u00e0 l’int\u00e9rieur, un fichier front.test.js<\/code>. Vous pouvez voir le fichier JavaScript termin\u00e9 pour les tests Jest<\/a> dans le d\u00e9p\u00f4t compagnon. Parcourons-le en blocs. La premi\u00e8re ligne importe le fichier JS que nous voulons tester\u00a0:<\/p>\nimport { wpJestTestsInit } from '..\/src\/main';<\/code><\/pre>\nafterEach(() => {\n jest.clearAllMocks();\n} );<\/code><\/pre>\nwpJestTests<\/code>avec laquelle nous \u00e9crivions wp_add_inline_script<\/code>n’a pas \u00e9t\u00e9 \u00e9crite pour une raison quelconque\u00a0:<\/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>cr\u00e9e un groupe compos\u00e9 de plusieurs tests li\u00e9s<\/li>\ntest<\/code>est ce qui effectue r\u00e9ellement un test<\/li>\nexpect<\/code>enveloppe notre sujet de test en donnant acc\u00e8s \u00e0 un certain nombre de "matchers" qui vous permettent de faire diff\u00e9rentes affirmations sur son contenu<\/li>\ntoBe<\/code>est l’un de ces correspondants. Jest a beaucoup de matchers inclus<\/a>, et il y en a m\u00eame d’autres que vous pouvez ajouter avec un package tiers<\/a>.<\/li>\n<\/ul>\nwpJestTests<\/code>donc sa valeur sera celle que vous avez d\u00e9finie dans globals.js<\/code>. Comme il s’agit de undefined<\/code>, nous ne pouvons pas travailler, nous voulons donc confirmer que la fonction revient sans rien faire.<\/p>\nwpJestTests<\/code>et se moque de la document.querySelector<\/code>m\u00e9thode \u00e0 retourner undefined<\/code>, qui est ce qu’elle retournerait si elle ne trouvait pas d’\u00e9l\u00e9ment dans le DOM. Dans ce cas, nous voulons confirmer que nous revenons sans rien faire et que notre fonction mocking document.querySelector<\/code>a \u00e9t\u00e9 appel\u00e9e une fois.<\/p>\nR\u00e9cup\u00e9ration simul\u00e9e dans les tests Jest<\/h2>\n
describe( 'Fetch posts', () => {<\/code><\/pre>\nafterAll( () => {\n global.fetch.mockClear();\n delete global.fetch;\n});<\/code><\/pre>\nafterEach<\/code>celui-ci, il s’ex\u00e9cutera apr\u00e8s l’ex\u00e9cution de tous les tests \u00e0 l’int\u00e9rieur de ce describe<\/code>bloc. \u00c9tant donn\u00e9 que notre fichier JavaScript utilise fetch<\/code>pour charger les messages, nous devons v\u00e9rifier qu’il a \u00e9t\u00e9 appel\u00e9 et qu’il a renvoy\u00e9 ce que nous avons demand\u00e9, nous allons donc nous moquer de la fetch<\/code>fonction\u00a0:<\/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 d’int\u00e9gration JavaScript avec Jest dans un code asynchrone qui utilise fetch<\/h2>\n
fetch<\/code>. Il y a une diff\u00e9rence majeure avec ce test par rapport aux autres tests unitaires JavaScript: il s’agit d’un test d’int\u00e9gration. Les tests pr\u00e9c\u00e9dents explor\u00e9s ici garantissaient simplement qu’un composant fonctionnait bien. Nous avons v\u00e9rifi\u00e9 que si la variable globale d’\u00e9tat initial n’\u00e9tait pas d\u00e9finie, notre composant ne s’afficherait pas. Ceci est diff\u00e9rent car nous allons tester le fonctionnement de l’ensemble du syst\u00e8me lorsque la variable d’\u00e9tat initiale est d\u00e9finie, d\u00e9clenchant ainsi une transaction de donn\u00e9es, et enfin ins\u00e9rer les titres des articles avec leurs liens dans le document.<\/p>\ntest<\/code>re\u00e7oit un done<\/code>param\u00e8tre. Il s’agit en fait d’une fonction qui sera appel\u00e9e \u00e0 la fin du test. Jest attendra done<\/code>d’\u00eatre appel\u00e9 avant de terminer le test. Si done<\/code>n’est jamais appel\u00e9, le test \u00e9chouera avec une erreur de temporisation. C’est int\u00e9ressant pour nous puisque nous testons du code impliquant fetch<\/code>, qui est une fonction asynchrone.<\/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>est d\u00e9fini et notre mocked document.querySelector<\/code>renvoie maintenant ce qui ressemble \u00e0 un \u00e9l\u00e9ment HTML, avec even classList<\/code>et sa add<\/code>m\u00e9thode enfant.<\/p>\nwpJestTestsInit<\/code>et nous nous attendons \u00e0 ce qu’il se termine correctement. Maintenant, puisqu’il fetch<\/code>est asynchrone, nous allons utiliser process.nextTick<\/code>from Node.js<\/a>. Le nextTick<\/code>in Node.js est la file d’attente qui s’ex\u00e9cutera apr\u00e8s la fin de tous les \u00e9v\u00e9nements de la boucle d’\u00e9v\u00e9nements actuelle. C’est formidable car toutes nos promesses seraient alors r\u00e9solues, ce qui est exactement ce dont nous avons besoin pour tester ce code qui implique fetch<\/code>.<\/p>\nquerySelector<\/code>que quelque chose a \u00e9t\u00e9 trouv\u00e9 avec lequel travailler, qui fetch<\/code>a bien \u00e9t\u00e9 appel\u00e9, qu’une classe a \u00e9t\u00e9 ajout\u00e9e \u00e0 la liste, et que les titres et les liens de nos articles ont \u00e9t\u00e9 ins\u00e9r\u00e9s dans l’\u00e9l\u00e9ment HTML correspondant. Une fois que tout est fait, nous appelons done<\/code>et notre test asynchrone se termine.<\/p>\nEx\u00e9cutez vos tests Jest<\/h2>\n
npm run test<\/code><\/p>\n
![\"Tests](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157897-61e6c3c169e87.png\")
<\/a><\/p>\n