Menu

Tutorial Jest - Teste de Unidade de JavaScript usando Jest Framework

jest tutorial javascript unit testing using jest framework

Experimente Nosso Instrumento Para Eliminar Problemas

Neste tutorial do Jest, aprenderemos sobre vários recursos do Jest, Jest Matchers e como usar a estrutura do Jest para testes de unidade de JavaScript:

tutorial de servidor de base de equipe para iniciantes

Jest é uma estrutura de teste de Javascript construída pelo Facebook.

Ele é projetado principalmente para aplicativos baseados no React (que também é desenvolvido pelo Facebook), mas pode ser usado para escrever cenários de automação para qualquer base de código baseada em Javascript.

Neste tutorial de teste do Jest, aprenderemos sobre os vários recursos do Jest, seus correspondentes e veremos como podemos usar o Jest com um exemplo de ponta a ponta. Também exploraremos a cobertura de código usando Jest.

Existe um tutorial

Lista de tutoriais desta série JEST

Tutorial nº 1: Tutorial Jest - Teste de Unidade de JavaScript com Jest Framework
Tutorial # 2: Como testar aplicativos React usando Jest Framework
Tutorial nº 3: Configuração do Jest e depuração de testes baseados no Jest

O que você aprenderá:

Primeiros passos com o teste de Jest

Algumas das vantagens / características do Jest são fornecidas abaixo:

  1. Configuração zero necessária.
  2. Rápido: Os testes de Jest são executados em paralelo - isso, por sua vez, reduz muito o tempo de execução do teste.
  3. Cobertura de código integrada: Jest oferece suporte à cobertura de código fora da caixa - esta é uma métrica muito útil para todos os pipelines de entrega baseados em CI e eficácia geral do teste de um projeto.
  4. Testes isolados e em sandbox: Cada teste do Jest é executado em sua própria sandbox, o que garante que dois testes não possam interferir ou impactar um ao outro.
  5. Suporte poderoso para simulação: Os testes de Jest suportam todos os tipos de simulação - seja simulação funcional, simulação de cronômetro ou simulação de chamadas de API individuais.
  6. Suporte para teste instantâneo: O teste de instantâneo é relevante do ponto de vista do React. Jest suporta a captura de um instantâneo do componente de reação que está sendo testado - isso pode validar com a saída real do componente. Isso ajuda muito a validar o comportamento do componente.

Jest Framework para testes de unidade de JavaScript

Nesta seção, veremos um exemplo de ponta a ponta para escrever testes usando a estrutura JEST para uma função Javascript simples. Em primeiro lugar, vamos ver como instalar o framework JEST em nosso projeto

Instalação IS

Jest é simplesmente um pacote de nó e pode ser instalado usando qualquer gerenciador de pacotes baseado em nó. Exemplo, npm ou fio.

Vamos ver alguns exemplos de comandos que podem ser usados ​​para instalar o pacote Jest.

yarn add --dev jest npm install --save-dev jest

Para instalar o módulo Jest globalmente, você pode simplesmente usar o sinalizador ‘-g’ junto com o comando npm. Isso permitirá que você use os comandos Jest diretamente, sem configurar o arquivo do pacote para testes npm.

npm install -g jest

Usando Jest em um projeto baseado em nó

Para usar o Jest em um projeto baseado em nó, simplesmente use os comandos da seção acima para instalar o pacote de nó para Jest.

Siga as etapas abaixo, a fim de criar um projeto de nó desde o início e, em seguida, instalar o Jest nele.

# 1) Crie uma pasta / diretório com um nome como o nome do seu projeto, por exemplo , myFirstNodeProject

#dois) Agora, usando o terminal ou linha de comando, navegue até o projeto criado na etapa acima e execute o script de inicialização npm usando o comando abaixo.

npm init

# 3) Assim que o comando acima for executado, ele solicitará diferentes questões / parâmetros.

Por exemplo , o nome do projeto, versão, etc. Simplesmente continue pressionando enter (e aceite os valores padrão). Depois de concluído, você verá um arquivo package.json criado em seu projeto. Este é um arquivo de configuração obrigatório para qualquer projeto baseado em nó

# 4) Agora execute o comando para instalar o pacote Jest no projeto recém-criado usando o comando abaixo.

npm install --save-dev jest

Isso instalará o módulo Jest (bem como suas dependências).

# 5) Agora, temos um projeto de nó pronto com ligações Jest. Vamos configurar o script de teste npm para executar os testes Jest, ou seja, quando o comando ‘npm test’ é executado, o script deve executar todos os testes baseados no framework Jest.

Para fazer isso, atualize o arquivo package.json e adicione uma seção de script conforme mostrado abaixo.

'scripts': { 'test': 'jest' }

O arquivo package.json final terá a aparência mostrada abaixo.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Escrevendo testes para uma função Javascript

Nesta seção, criaremos um código de função Javascript simples para adição, subtração e multiplicação de 2 números e escreveremos os testes correspondentes baseados em Jest para ele.

Primeiro, vamos ver como é o código para nosso aplicativo (ou função) em teste.

# 1) No projeto de nó criado na seção acima, crie um arquivo js chamado calculator.js com o conteúdo mostrado abaixo

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#dois) Agora, crie um arquivo de teste na mesma pasta para esses testes, denominado calculator.test.js - esta é a convenção esperada pelo framework Jest para procurar todos os arquivos que contêm testes baseados em Jest. Também importaremos a função em teste, a fim de executar o código no teste.

É assim que o arquivo ficaria com apenas a declaração de importação / solicitação.

const mathOperations = require('./calculator');

# 3) Agora, vamos escrever testes para diferentes métodos no arquivo principal, ou seja, soma, diferença e produto.

Os testes de Jest seguem os testes de estilo BDD, com cada suíte de teste tendo um bloco de descrição principal e pode ter vários blocos de teste. Além disso, observe que os testes também podem ter blocos de descrição aninhados.

Vamos escrever um teste para adicionar 2 números e validar os resultados esperados. Estaremos fornecendo os números como 1 e 2 e esperando a saída como 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Consulte os pontos abaixo com o teste acima:

para) O bloco de descrição é uma descrição externa do conjunto de testes, ou seja, representa um contêiner genérico para todos os testes que iremos escrever para a calculadora neste arquivo.

b) Em seguida, temos um bloco de teste individual - isso representa um único teste. A string entre aspas representa o nome do teste.

c) Consulte o código no bloco expect - “expect” nada mais é do que uma asserção. A instrução está chamando o método de soma na função em teste com as entradas 1 e 2 e esperando que a saída seja 3.

Também podemos reescrever isso de uma maneira mais simples para entendê-lo melhor.

Veja abaixo, agora separamos a chamada de função e a asserção como 2 instruções separadas para torná-la mais sucinta.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

d) Para executar este teste, basta executar o comando “ teste acima do nível do mar ”No terminal ou prompt de comando no local do projeto.

Você verá a saída conforme mostrado abaixo.

o que significa duplo em java

Execute o comando “npm test” no terminal - Saída

# 4) Vamos tentar mais alguns testes.

para) Primeiro, escreva um teste de falha e veja qual saída obtemos. Vamos apenas mudar o resultado para algum valor incorreto no mesmo teste que escrevemos na última seção. Veja como é o teste.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Aqui, esperamos uma soma de 1 e 2 para retornar 10, o que está incorreto.

Vamos tentar executar isso e ver o que temos.

saída detalhada quando um teste falha

Você pode ver a saída detalhada quando um teste falha, ou seja, o que foi realmente retornado e o que era esperado e qual linha causou o erro na função em teste etc.

b) Vamos escrever mais testes para as outras funções, ou seja, diferença e produto.

O arquivo de teste com todos os testes terá a aparência mostrada abaixo.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Quando os testes acima são executados, a saída fornecida abaixo é gerada.

Saída de testes para funções - diferença e produto

Tutorial em vídeo: o que é brincadeira

Há Matchers

Asserções de brincadeira usam matchers para afirmar sobre uma condição. Jest usa matchers do esperado Api. O documento esperado da API pode ser referenciado aqui.

Vamos examinar alguns dos matchers mais comumente usados ​​junto com os testes de Jest.

# 1) Igualdade

Esses são os combinadores mais comumente usados. Eles são usados ​​para verificar a igualdade ou desigualdade e são usados ​​principalmente para operações aritméticas.

Vejamos alguns exemplos abaixo:

Aqui, escrevemos 2 matchers usando toBe e not.toBe, que são análogos a equals e não iguais.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Veracidade

Aqui, veremos correspondências para valores nulos, falsos e verdadeiros, ou seja, valores falsos e verdadeiros. É importante notar que tudo o que não seja logicamente verdadeiro é falso.

Por exemplo, número 0, nulo, string vazia, NaN são todos exemplos de Javascript w.r.t falso.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Matchers de números

Esses matchers podem ser usados ​​para operações aritméticas gerais.

Por exemplo, maiorThan, lessThan, maiorThanOrEqual, etc.

Verifique os exemplos abaixo para mais detalhes

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) Matchers de string

Muitas vezes, precisamos de strings para corresponder a uma expressão regular como uma asserção em um teste de unidade. Jest fornece matchers para strings a serem comparadas com uma expressão regular.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Tutorial em vídeo: há Matchers

Jest Hooks - Configuração e desmontagem

Assim como todas as outras estruturas de teste de unidade baseadas em xUnit, a estrutura Jest também fornece ganchos para métodos de configuração e limpeza. Esses métodos de gancho são executados antes e depois de cada teste no conjunto de testes ou antes e depois da execução do testSuite.

No total, existem 4 ganchos disponíveis para uso.

  • beforeEach e afterEach: Esses ganchos são executados antes e depois de cada teste no conjunto de testes.
  • beforeAll e afterAll: Esses ganchos são executados apenas uma vez para cada suíte de teste. ou seja, se um conjunto de testes tiver 10 testes, esses ganchos serão executados apenas uma vez para cada execução de teste.

Vejamos um exemplo: Adicionaremos esses ganchos ao mesmo exemplo de teste de adição de 2 números.

Vamos definir as entradas no gancho beforeEach para ilustração. O arquivo de teste ficaria com ganchos de teste, conforme mostrado abaixo.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

dicas e truques

# 1) Os relatórios de linha de comando são bons, mas não muito legíveis. Existem bibliotecas / módulos disponíveis para gerar relatórios de teste baseados em HTML para os testes Jest. Isso pode ser alcançado conforme mostrado abaixo.

melhores serviços de teleconferência gratuita
  • Adicione o pacote de nó para jest-html-reporter usando o comando abaixo.
npm install --save-dev jest-html-reporter
  • Agora adicione a configuração do Jest para o relator no arquivo package.json do projeto do nó.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Uma vez configurado agora, execute os testes usando o “ teste acima do nível do mar ”Comando.
  • Se a configuração for bem-sucedida, você poderá ver um relatório baseado em Html sendo criado no diretório do projeto.

Relatório de teste

# 2) Criação do relatório de cobertura de código: A cobertura do código é uma das métricas mais importantes de uma perspectiva de teste de unidade. Basicamente, ele mede a porcentagem de instruções / ramificações cobertas para o aplicativo em teste.

Jest fornece suporte pronto para uso para cobertura de código. Para obter o relatório de cobertura do Jest, Existe configuração precisa ser adicionado no package.json Arquivo.

Adicione a configuração conforme mostrado abaixo:

'jest': { 'collectCoverage':true }

Assim que esta configuração estiver feita, tente executar os testes usando o comando 'Teste acima do nível do mar' , e você pode veja os detalhes da cobertura do código logo abaixo dos resultados da execução do teste, conforme mostrado abaixo.

detalhes de cobertura de código

Tutorial de vídeo: Cobertura do Jest e geração de relatórios HTML

Conclusão

Neste tutorial do Jest, examinamos os princípios básicos da estrutura do Jest. Aprendemos como instalar a estrutura Jest e vimos como ela pode ser usada para testar arquivos Javascript simples.

Também exploramos os diferentes tipos de matchers suportados por Jest e cobrimos repórteres Html e relatórios de cobertura de código.

PRÓXIMO Tutorial

Leitura recomendada

^