Manipulação DOM

Outra classe de funções que é frequentemente considerada difícil de testar é o código que manipula diretamente o DOM. Vamos ver como podemos 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, nós criamos um arquivo de teste na pasta __tests__/:

__tests__/displayUser-test.js

'use strict';

jest.mock('.. fetchCurrentUser');

test('mostra um usuário após um clique', () => {
  // Configure nosso corpo do documento
  document.body.innerHTML =
    '<div>+
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // Este módulo possui um efeito lateral
  require('. /displayUser');

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

  // Chama a função de simulação fetchCurrentUser para invocar automaticamente
  // seu callback com alguns dados
  fetchCurrentUser. ockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Usa o jquery para simular um clique no nosso botão
  $('#button'). lick();

  // Verifica se a função fetchCurrentUser foi chamada, e que o texto interno do elemento
  // span #username foi atualizado como esperaríamos.
  expect(fetchCurrentUser).toBeCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logado');
});

The function being tested adds an event listener on the #button DOM element, so we need to set up our DOM correctly for the test. Jest ships with jsdom which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!

Nós estão simulamos fetchCurrentUser.js para que nosso teste não faça uma solicitação de rede real, mas em vez disso resolve os dados da simulação localmente. Isso garante que nosso teste pode ser concluído em milissegundos, em vez de segundos e garante uma rápida iteração de teste unitário.

The code for this example is available at examples/jquery.