Ir para o conteúdo principal
Versão: 30.0

Manipulação de DOM

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Outra categoria de funções frequentemente considerada difícil de testar é o código que manipula diretamente o DOM. Vamos ver como testar o seguinte trecho de código jQuery que escuta um evento de clique, busca alguns dados de forma assíncrona e define o conteúdo de um span.

displayUser.js
'use strict';

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

Novamente, criamos um arquivo de teste na pasta __tests__/:

__tests__/displayUser-test.js
'use strict';

jest.mock('../fetchCurrentUser');

test('displays a user after a click', () => {
  // Set up our document body
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // This module has a side-effect
  require('../displayUser');

  const $ = require('jquery');
  const fetchCurrentUser = require('../fetchCurrentUser');

  // Tell the fetchCurrentUser mock function to automatically invoke
  // its callback with some data
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Use jquery to emulate a click on our button
  $('#button').click();

  // Assert that the fetchCurrentUser function was called, and that the
  // #username span's inner text was updated as we'd expect it to.
  expect(fetchCurrentUser).toHaveBeenCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logged In');
});

Estamos simulando o fetchCurrentUser.js para que nosso teste não faça uma requisição de rede real, mas resolva com dados simulados localmente. Isso garante que nosso teste seja concluído em milissegundos em vez de segundos e assegura uma velocidade rápida de iteração nos testes unitários.

Além disso, a função sendo testada adiciona um listener de eventos no elemento DOM #button, então precisamos configurar nosso DOM corretamente para o teste. O jsdom e o pacote jest-environment-jsdom simulam um ambiente DOM como se estivéssemos em um navegador. Isso significa que toda API DOM que chamarmos pode ser observada da mesma forma que seria em um navegador!

Para começar com o ambiente de teste JSDOM, o pacote jest-environment-jsdom deve ser instalado caso ainda não esteja:

npm install --save-dev jest-environment-jsdom

O código deste exemplo está disponível em exemplos/jquery.