Configuração do Ambiente de Testes

Escrever testes para seu código jQuery é essencial para criar aplicações web robustas e fáceis de manter. Isso ajuda a detectar erros antecipadamente e garante que seu código se comporte conforme o esperado.

• Evita regressões: Garante que novas alterações não interrompam funcionalidades existentes.
• Melhora a qualidade do código: Obriga você a escrever código modular e testável.
• Facilita a colaboração: Fornece uma documentação clara de como os componentes devem funcionar.

Para testar JavaScript, incluindo jQuery, você precisa de um executor de testes. Essa ferramenta executa seus testes e informa os resultados.

Duas opções populares são:

• Jest: Uma estrutura de testes moderna e repleta de recursos, criada pelo Facebook. É amplamente usada com React, mas funciona muito bem com qualquer JS.
• QUnit: Uma estrutura de testes específica para jQuery, mais simples, porém com menos recursos que Jest.

Nesta lição, vamos nos concentrar na configuração do Jest devido aos seus recursos abrangentes e à ampla adoção.

Antes de instalar o Jest, você precisa de um projeto Node.js. Se ainda não tiver um, poderá criá-lo facilmente.

Navegue até o diretório do seu projeto no terminal e execute:

Esse comando cria um arquivo package.json, que gerencia as dependências e os scripts do seu projeto.

Agora, vamos instalar o Jest. Como o jQuery costuma interagir com o DOM (Document Object Model) do navegador, também precisaremos de jest-environment-jsdom. O JSDOM fornece um ambiente semelhante ao navegador no Node.js, para que seu código jQuery possa manipular um DOM virtual.

Instale-os como dependências de desenvolvimento:

Isso adiciona o Jest e o JSDOM ao seu package.json.

Para informar ao Jest que ele deve usar o JSDOM, é necessário configurá-lo. Você pode fazer isso adicionando um script test ao seu package.json ou criando um arquivo jest.config.js.

Opção 1: em package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

A opção --env=jsdom garante que o Jest execute os testes em um ambiente JSDOM.

O Jest procura arquivos de teste em um diretório __tests__ ou em arquivos que terminam com .test.js (ou .spec.js). Vamos criar um arquivo de teste simples.

Crie um diretório chamado __tests__ na raiz do seu projeto e adicione um arquivo como __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe agrupa testes relacionados, e test (ou it) define um caso de teste individual.

Para testar código jQuery, você precisa importar o próprio jQuery para o arquivo de teste. Você pode instalar o jQuery via npm: npm install jquery.

Em seguida, no arquivo de teste, você pode importá-lo:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

As afirmações são a forma de verificar se seu código se comporta corretamente. O Jest usa a função expect() combinada com correspondentes para fazer afirmações.

Veja um exemplo simples de JavaScript (não específico de jQuery, mas que demonstra afirmações):

O Jest oferece um conjunto amplo de correspondentes. Veja alguns comuns que você usará:

• .toBe(value): Verifica a igualdade exata (como ===).
• .toEqual(value): Verifica a igualdade profunda de objetos ou matrizes.
• .not.toBe(value): Verifica a desigualdade.
• .toBeTruthy() / .toBeFalsy(): Verifica se um valor é avaliado como verdadeiro ou falso.
• .toContain(item): Verifica se uma matriz ou cadeia de caracteres contém um item.

Com jQuery, você frequentemente combinará esses recursos com métodos do jQuery, como expect($element.text()).toBe('Expected Text');

Depois que seus arquivos de teste estiverem configurados, executá-los é simples. Basta usar o script que definimos em package.json:

O Jest encontrará todos os seus arquivos de teste, executará os testes no ambiente JSDOM e informará os resultados no terminal. Ele mostrará quais testes foram aprovados, quais falharam e fornecerá detalhes sobre cada falha.

Você aprendeu a configurar um ambiente de testes para jQuery usando Jest e JSDOM. Quais dos comandos e configurações a seguir são essenciais para uma configuração básica do Jest com suporte ao DOM?

Nesta lição, você aprendeu a configurar um ambiente de testes robusto para suas aplicações jQuery usando Jest.

• Inicializamos um projeto Node.js com npm init.
• Instalamos o Jest e o jest-environment-jsdom para simular um ambiente de navegador.
• Configuramos o Jest em package.json para usar o JSDOM.
• Aprendemos a estruturar arquivos de teste, importar jQuery e escrever afirmações básicas usando os correspondentes do Jest.

Essa base permite escrever testes eficazes, garantindo que seu código jQuery seja confiável e fácil de manter.