Para JavaScript, h\u00e1 uma p\u00e1gina sobre a execu\u00e7\u00e3o de testes QUnit<\/a> no Handbook, embora seja mais sobre testar o c\u00f3digo JavaScript no n\u00facleo do WordPress.<\/p>\n Embora nada disso seja padronizado para JavaScript no WordPress, podemos escrever \u00f3timos testes de unidade usando o conjunto de testes Jest. Neste artigo vamos aprender como escrever testes de unidade JavaScript para um plugin de exemplo que carrega 5 posts atrav\u00e9s da WP REST API usando a No passado, escrever testes de unidade JavaScript envolvia configurar Mocha para executar testes, Chai para fazer asser\u00e7\u00f5es e Sinon para simular fun\u00e7\u00f5es e espion\u00e1-las. Embora ofere\u00e7am grande flexibilidade, \u00e9 muito mais complexo trabalhar com tr\u00eas pacotes do que com um. O Jest<\/a> fornece tudo isso em um \u00fanico pacote:<\/p>\n Para manter este artigo focado em testes com Jest, h\u00e1 uma configura\u00e7\u00e3o adicional externa ao processo de teste como Babel ou Webpack que n\u00e3o ser\u00e1 abordada aqui. Tudo isso pode ser encontrado no reposit\u00f3rio WP Jest Tests<\/a> que acompanha este artigo. Para manter as coisas contextuais, cada se\u00e7\u00e3o ser\u00e1 vinculada a um dos arquivos relevantes que escreveremos.<\/p>\n O PHP para o plugin de exemplo<\/a> que usaremos para aprender a escrever os testes de unidade JavaScript \u00e9 bastante padr\u00e3o. As \u00fanicas linhas interessantes s\u00e3o aquelas quando enfileiramos nosso arquivo JavaScript e adicionamos um script embutido para passar vari\u00e1veis \u200b\u200bpara ele:<\/p>\n Depois de enfileirar nosso arquivo JavaScript, adicionamos uma vari\u00e1vel global Primeiro teremos que inicializar Edite o arquivo package.json<\/a> que foi criado e adicione uma nova entrada para executar nossos testes na Este ser\u00e1 o comando que usaremos para dizer ao Jest para executar nossos testes de unidade JavaScript. Esta \u00e9 uma execu\u00e7\u00e3o \u00fanica, mas o Jest tamb\u00e9m suporta a visualiza\u00e7\u00e3o de arquivos, para que voc\u00ea possa inserir uma adicional:<\/p>\n Agora instale o Jest como uma depend\u00eancia de desenvolvimento executando<\/p>\n Durante a instala\u00e7\u00e3o, crie um arquivo chamado Vamos passar por cada um:<\/p>\n Voc\u00ea certamente notou a refer\u00eancia: este \u00e9 um token especial que \u00e9 substitu\u00eddo pelo Jest com a raiz do seu projeto, que geralmente \u00e9 a localiza\u00e7\u00e3o do seu arquivo Vamos nos aprofundar nas pr\u00f3ximas duas se\u00e7\u00f5es, mas primeiro, crie a pasta e esses dois arquivos mencionados acima:<\/p>\n Se, como este plugin, voc\u00ea usa o Webpack para compilar tudo, incluindo estilos, e est\u00e1 importando o voc\u00ea precisa usar styleMock.js<\/a> para simular arquivos SASS ao import\u00e1-los em nosso arquivo JavaScript, caso contr\u00e1rio, o Jest travar\u00e1, pois n\u00e3o poder\u00e1 resolver o m\u00f3dulo. Voc\u00ea n\u00e3o precisa de muito para este arquivo, basta adicionar<\/p>\n O Jest usar\u00e1 esse mock toda vez que encontrar uma Vamos trabalhar agora no arquivo globals.js<\/a>. Uma das vantagens de usar o Jest, \u00e9 que ele j\u00e1 vem com um j\u00e1 configurado Crie uma pasta Isso declarar\u00e1 e zombar\u00e1 de alguns objetos e m\u00e9todos que voc\u00ea usar\u00e1 posteriormente em seus testes. O \u00faltimo \u00e9 de particular interesse<\/p>\n Esta \u00e9 a vari\u00e1vel global que escrevemos usando O plugin do WordPress tem um \u00fanico arquivo JavaScript main.js<\/a> em uma Voc\u00ea vai exportar a fun\u00e7\u00e3o que faz todo o trabalho:<\/p>\n para que voc\u00ea possa us\u00e1-lo em seus testes no Jest.<\/p>\n Agora voc\u00ea pode come\u00e7ar a escrever testes! Jest pode encontrar testes de v\u00e1rias maneiras:<\/p>\n Crie a Em seguida, limpamos todos os mocks, para que nunca executemos mocks sujos carregando valores de testes anteriores. Fazer isso pode levar a erros, pois, por exemplo, se estivermos espionando quantas vezes uma fun\u00e7\u00e3o simulada foi chamada, podemos obter uma leitura incorreta se n\u00e3o limparmos a simula\u00e7\u00e3o entre teste e teste:<\/p>\n O primeiro teste que escreveremos faz afirma\u00e7\u00f5es b\u00e1sicas quando algumas coisas falham. Por exemplo, se a vari\u00e1vel global Neste c\u00f3digo,<\/p>\n O primeiro teste n\u00e3o est\u00e1 definindo nada para O segundo teste define O pr\u00f3ximo conjunto de testes come\u00e7a com<\/p>\n e dentro disso, temos outra fun\u00e7\u00e3o tear down:<\/p>\n ao contr\u00e1rio N\u00f3s zombamos da primeira Promise que resolve para a resposta e a segunda para uma representa\u00e7\u00e3o JSON dos dados. Esses dados s\u00e3o semelhantes aos que obtemos da API REST do WP. Dado que nosso c\u00f3digo precisa apenas do t\u00edtulo e do link, estamos zombando disso.<\/p>\n Agora podemos escrever o teste usando o mocked Desde o in\u00edcio, isso \u00e9 diferente: a fun\u00e7\u00e3o an\u00f4nima passada para O global Chamamos O resto s\u00e3o mais asser\u00e7\u00f5es para garantir que Agora voc\u00ea pode digitar<\/p>\n e o Jest executar\u00e1 os testes de unidade JavaScript para o seu plugin WordPress<\/p>\nfetch<\/code>fun\u00e7\u00e3o do JavaScript e os renderiza em um determinado elemento DOM na p\u00e1gina.<\/p>\nBenef\u00edcios de usar Jest para testes de unidade JavaScript no WordPress<\/h2>\n
\n
describe<\/code>e it<\/code>outest<\/code><\/li>\nexpect<\/code>e toBe<\/code>, toHaveLength<\/code>e muito mais<\/li>\nAntes de seguir em frente<\/h3>\n
Vis\u00e3o geral do lado do 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>com wp_add_inline_script()<\/code>. Essa vari\u00e1vel \u00e9 particularmente interessante e complicada de lidar porque \u00e9 externa ao nosso arquivo JavaScript e teremos que zombar dela em nossos testes.<\/p>\nConfigurar testes do Jest<\/h2>\n
npm<\/code>em nosso projeto de plugin para poder instalar o Jest com ele. Navegue na linha de comando at\u00e9 a pasta do seu plugin e execute:<\/p>\nnpm init<\/code>e percorra a s\u00e9rie de prompts aqui<\/p>\nscripts<\/code>se\u00e7\u00e3o:<\/p>\n\"test\": \"jest\"<\/code><\/p>\n\"test-watch\": \"jest --watch\"<\/code><\/p>\nnpm install -D jest<\/code><\/p>\njest.config.js<\/code>. Isso manter\u00e1 toda a configura\u00e7\u00e3o necess\u00e1ria. Adicione o seguinte:<\/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 cada teste individual deve ser relatado durante a execu\u00e7\u00e3o. Todos os erros tamb\u00e9m ser\u00e3o mostrados na parte inferior ap\u00f3s a execu\u00e7\u00e3o. Observe que, se houver apenas um arquivo de teste sendo executado, o padr\u00e3o ser\u00e1 true<\/code>.<\/li>\nsetupFiles<\/code>: uma lista de caminhos para m\u00f3dulos que executam algum c\u00f3digo para configurar ou configurar o ambiente de teste. Cada setupFile ser\u00e1 executado uma vez por arquivo de teste. Como cada teste \u00e9 executado em seu pr\u00f3prio ambiente, esses scripts ser\u00e3o executados no ambiente de teste imediatamente antes de executar o pr\u00f3prio c\u00f3digo de teste. Usaremos isso para declarar vari\u00e1veis \u200b\u200bglobais renderizadas por PHP e WordPress com comandos como wp_add_inline_script<\/code>ou wp_localize_script<\/code>.<\/li>\nmoduleNameMapper<\/code>: este \u00e9 um mapa de express\u00f5es regulares para nomes de m\u00f3dulos (ou arrays de nomes de m\u00f3dulos) que permitem stub out recursos est\u00e1ticos, como imagens ou estilos com um \u00fanico m\u00f3dulo.<\/li>\n<\/ul>\npackage.json<\/code>.<\/p>\n\n
__mocks__<\/code><\/li>\nstyleMock.js<\/code>eglobals.js<\/code><\/li>\n<\/ul>\nImporta\u00e7\u00e3o de estilos simulados para testes Jest<\/h2>\n
.scss<\/code>arquivo no .js<\/code>arquivo:<\/p>\nimport '.\/main.scss';<\/code><\/pre>\n.scss<\/code>importa\u00e7\u00e3o e os mapear\u00e1 para o mock, permitindo que voc\u00ea avance com os testes sem se preocupar com os estilos.<\/p>\nConfigurar globais para Jest<\/h2>\n
jsdom<\/code>, uma implementa\u00e7\u00e3o de padr\u00f5es web puro-JavaScript, que simula um ambiente DOM como se voc\u00ea estivesse no navegador, e vamos us\u00e1-lo para simular elementos DOM para nossos testes.<\/p>\n__mocks__<\/code>e um globals.js<\/code>arquivo dentro dela. Adicione isso ao arquivo:<\/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>. Voc\u00ea precisa zombar dela como uma vari\u00e1vel global para poder us\u00e1-la em seus testes.<\/p>\nVis\u00e3o geral do arquivo JavaScript<\/h2>\n
\/src<\/code>pasta. Isso \u00e9 posteriormente transpilado e gerado em um \/js\/front.js<\/code>arquivo que \u00e9 o que o PHP carregar\u00e1. O JavaScript carrega cinco posts do WordPress usando fetch<\/code>, uma fun\u00e7\u00e3o JavaScript padr\u00e3o, por meio da API WP REST e insere seu t\u00edtulo, com um link para o post, em um arquivo div.entry-content<\/code>.<\/p>\nexport const wpJestTestsInit =() => {<\/code><\/pre>\nEscrevendo testes de unidade JavaScript com Jest, finalmente!<\/h2>\n
\n
test.js<\/code><\/li>\nmain.test.js<\/code><\/li>\n.js<\/code>arquivos localizados em uma pasta chamada__tests__<\/code><\/li>\n<\/ul>\n__tests__<\/code>pasta e dentro dela, um arquivo front.test.js<\/code>. Voc\u00ea pode ver o arquivo JavaScript finalizado para os testes Jest no reposit\u00f3rio<\/a> complementar. Vamos passar por isso em blocos. A primeira linha importa o arquivo JS que queremos testar:<\/p>\nimport { wpJestTestsInit } from '..\/src\/main';<\/code><\/pre>\nafterEach(() => {\n jest.clearAllMocks();\n} );<\/code><\/pre>\nwpJestTests<\/code>com a qual est\u00e1vamos escrevendo wp_add_inline_script<\/code>n\u00e3o foi escrita por qualquer 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>cria um grupo composto por v\u00e1rios testes relacionados<\/li>\ntest<\/code>\u00e9 o que realmente realiza um teste<\/li>\nexpect<\/code>envolve nosso assunto de teste fornecendo acesso a v\u00e1rios “matchers" que permitem fazer diferentes afirma\u00e7\u00f5es sobre seu conte\u00fado<\/li>\ntoBe<\/code>\u00e9 um desses matchers. O Jest tem muitos matchers inclu\u00eddos<\/a> e h\u00e1 ainda outros que voc\u00ea pode adicionar com um pacote de terceiros<\/a>.<\/li>\n<\/ul>\nwpJestTests<\/code>, portanto, seu valor ser\u00e1 o que voc\u00ea definiu em globals.js<\/code>. Como \u00e9 undefined<\/code>, n\u00e3o podemos trabalhar, ent\u00e3o queremos confirmar que a fun\u00e7\u00e3o retorna sem fazer nada.<\/p>\nwpJestTests<\/code>e simula o document.querySelector<\/code>m\u00e9todo para retornar undefined<\/code>que \u00e9 o que ele retornaria se n\u00e3o pudesse encontrar um elemento no DOM. Nesse caso, queremos confirmar que estamos retornando sem fazer nada e que nossa fun\u00e7\u00e3o mocking document.querySelector<\/code>foi chamada uma vez.<\/p>\nBusca simulada em testes Jest<\/h2>\n
describe( 'Fetch posts', () => {<\/code><\/pre>\nafterAll( () => {\n global.fetch.mockClear();\n delete global.fetch;\n});<\/code><\/pre>\nafterEach<\/code>disso, ser\u00e1 executado depois que todos os testes dentro deste describe<\/code>bloco forem executados. Como nosso arquivo JavaScript usa fetch<\/code>para carregar os posts, precisamos verificar se ele foi chamado e retornou o que solicitamos, ent\u00e3o vamos zombar da fetch<\/code>fun\u00e7\u00e3o:<\/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>\nTeste de integra\u00e7\u00e3o JavaScript com Jest em c\u00f3digo ass\u00edncrono que usa fetch<\/h2>\n
fetch<\/code>. H\u00e1 uma grande diferen\u00e7a com este teste em compara\u00e7\u00e3o com os outros testes de unidade JavaScript: este \u00e9 um teste de integra\u00e7\u00e3o. Testes anteriores explorados aqui simplesmente garantiram que um componente estava funcionando bem. Verificamos que se a vari\u00e1vel global de estado inicial n\u00e3o estivesse definida, nosso componente n\u00e3o renderia. Isso \u00e9 diferente porque vamos testar como todo o sistema funciona quando a vari\u00e1vel de estado inicial \u00e9 definida, acionando assim uma transa\u00e7\u00e3o de dados e, finalmente, inserindo os t\u00edtulos dos posts com seus links no documento.<\/p>\ntest<\/code>recebe um done<\/code>par\u00e2metro. Esta \u00e9, na verdade, uma fun\u00e7\u00e3o que ser\u00e1 chamada quando terminarmos o teste. Jest vai esperar at\u00e9 done<\/code>ser chamado antes de terminar o teste. Se done<\/code>nunca for chamado, o teste falhar\u00e1 com um erro de tempo limite. Isso \u00e9 interessante para n\u00f3s, pois estamos testando c\u00f3digo envolvendo fetch<\/code>, que \u00e9 uma fun\u00e7\u00e3o ass\u00edncrona.<\/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\u00e1 definido e nosso mocked document.querySelector<\/code>agora retorna o que se assemelha a um elemento HTML, com even classList<\/code>e seu add<\/code>m\u00e9todo filho.<\/p>\nwpJestTestsInit<\/code>e esperamos que termine corretamente. Agora, como fetch<\/code>\u00e9 ass\u00edncrono, vamos fazer uso process.nextTick<\/code>do Node.js<\/a>. O nextTick<\/code>no Node.js \u00e9 a fila que ser\u00e1 executada ap\u00f3s a conclus\u00e3o de todos os eventos no loop de eventos atual. Isso \u00e9 \u00f3timo porque todas as nossas promessas seriam resolvidas ent\u00e3o, que \u00e9 exatamente o que precisamos para testar esse c\u00f3digo que envolve fetch<\/code>.<\/p>\nquerySelector<\/code>encontrou algo com que trabalhar, que de fetch<\/code>fato foi chamado, que uma classe foi adicionada \u00e0 lista, e que os t\u00edtulos e links de nossos posts foram inseridos no elemento HTML correspondente. Quando tudo estiver pronto, chamamos done<\/code>e nosso teste ass\u00edncrono termina.<\/p>\nExecute seus testes Jest<\/h2>\n
npm run test<\/code><\/p>\n
![\"Testes](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157897-61e6c3c169e87.png\")
<\/a><\/p>\n