Menu

Configuração do Jest e depuração de testes baseados no Jest

jest configuration debugging jest based tests

Experimente Nosso Instrumento Para Eliminar Problemas

Saiba mais sobre Jest Config, depuração e comparação de Jest com outras estruturas de teste de JavaScript, especificamente Jest vs Mocha e Jest vs Jasmine:

Nisso Informative Jest Series , nós exploramos tudo sobre Testando Apps React, Mocks e Spies usando Jest em nosso último tutorial.

Neste tutorial, aprenderemos mais sobre os arquivos de configuração do Jest e ver como você pode realmente depurar os testes do Jest para solucionar um ou mais testes múltiplos.

Também exploraremos algumas das opções comumente usadas no arquivo Jest Config que podem ser configuradas independentemente em um projeto ou aquelas que podem ser adicionadas como parte da própria configuração package.json.

Configuração e depuração do Jest

Estaremos usando o Visual Studio Code para escrever nossos testes Jest e usaremos uma extensão ou plug-in no VS Code para habilitar o suporte de depuração para os testes Jest.

árvore b + vs árvore b

Além disso, compararemos as diferentes estruturas de teste de Javascript como Mocha e Jasmine com Jest e compreenderemos os prós e os contras de cada uma.

O que você aprenderá:

Existe configuração

A configuração do Jest pode ser especificada de 3 maneiras

  • Por meio de uma chave no arquivo package.json.
  • Através de um arquivo jest.config.js - Arquivo de configuração escrito como um módulo.
  • Por meio de um JSON que pode ser usado com a opção como sinalizador –config.

Com todas as abordagens acima, você pode obter o mesmo resultado. Vamos ver a primeira etapa - ou seja, adicionar a configuração do Jest por meio de uma chave no arquivo package.json.

No arquivo package.json existente, adicione uma nova chave chamada “jest”. Isso nada mais é do que um conjunto de pares de valores-chave no formato JSON. Todas as opções de configuração relacionadas ao Jest podem ser adicionadas a esta seção no arquivo package.json.

adicionar opções de configuração

As opções de configuração usadas com mais frequência estão listadas abaixo.

# 1) Relacionado à Cobertura

collectCoverage, coveredThreshold, abrangênciaReporters, abrangênciaDirectory - Estas são as opções mais utilizadas. A cobertura é uma métrica importante e garante que o código seja testado em relação a um limite predefinido.

Uma explicação detalhada de cada um deles é a seguinte:

# 1) collectCoverage: Esta opção é usada para especificar se queremos que o executor de teste Jest colete informações de cobertura ou não. Quando definido como verdadeiro, o corredor Jest coleta as informações de cobertura. Com esta opção, a cobertura será coletada e exibida no console no final da execução do teste, conforme mostrado abaixo.

# 2) Limite de cobertura: Esta configuração nos permite especificar os valores limite para cobertura em termos percentuais. Isso é muito útil quando a organização ou equipe deseja aderir a um determinado valor mínimo de cobertura sem o qual nenhum código pode ser enviado ou mesclado ao branch principal.

Vamos ver como isso pode ser usado.

A cobertura pode ser especificada em nível global, nível de arquivo ou qualquer outro regex. Quando especificado no nível global, todos os limites especificados devem corresponder para a combinação de todos os arquivos no projeto.

'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } }

Especificar a cobertura no nível do arquivo também é possível, alterando “global” para nome de arquivo ou regex. As configurações de limite podem variar dependendo do requisito.

'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }

# 3) CoverReporters: Esta configuração é usada para especificar qual repórter você gostaria de usar para gerar o relatório de cobertura. Existem muitos relatores existentes como pacotes NPM disponíveis que podem ser usados ​​para gerar um relatório de cobertura no final da execução do teste.

# 4) diretório de cobertura: Esta configuração permite que o usuário especifique o diretório onde os relatórios de cobertura devem ser salvos ou persistidos após serem criados.

A seguir, é fornecido um exemplo combinado de uso de todas as configurações de cobertura relacionadas.

'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': ( 'lcov','text' ), 'coverageDirectory': './output/code-coverage/' }

Aqui, usamos 2 repórteres de cobertura, ou seja, lcov e text.Lcov é a cobertura de linha do Linux e está presente por padrão e o repórter 'texto' significa que a saída de cobertura também será exibida no console. O relatório de cobertura será gerado no caminho especificado na configuração “diretório da cobertura”.

diretório is-cobertura

# 2) Relacionado a simulação

Mocks são muito usados ​​durante os testes com Jest. Ambas as opções de configuração abaixo permitem fácil configuração e eliminação de simulações.

  • autoMocks: Quando definido como verdadeiro, isso irá simular todos os módulos que são importados no teste por padrão.
  • clearMocks: Quando definido como verdadeiro, isso limpará todas as configurações / módulos simulados após cada teste, de modo que cada teste comece com um novo estado. Isso também pode ser feito usando o testCleanup ou o método “depois”, mas tê-lo configurado torna tudo ainda mais fácil.

# 3) Testes Relacionados

# 1) testTimeout: Esta configuração é usada para fornecer uma configuração de tempo limite difícil para testes em milissegundos. Qualquer teste que ultrapasse o limite configurado será marcado como falha devido à exceção de tempo limite.

'jest' { 'testTimeout': 100 }

# 2) Global: Esta configuração é usada para definir variáveis ​​globais que devem estar disponíveis em cada teste.

'jest' { 'globals': { 'globalVar': 'test global variable!' } }

Vamos tentar usar uma variável global no teste e ver se funciona conforme o esperado.

describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) })

Depois de executar este teste, o valor de globalVar deve ser registrado.

is_output

Verificar aqui para obter a lista completa de todas as opções de configuração.

Tutorial de vídeo sobre configuração de IS

Depurando usando Jest

Nesta seção, tentaremos entender como podemos depurar testes escritos com base no Jest.

Aplicaremos e entenderemos 2 maneiras diferentes de depurar testes Jest.

  1. Depurador nativo do Node e, em seguida, usando o Chrome Inspector para depurar os testes.
  2. Usando a configuração de depuração do Visual Studio Code para depurar os testes no próprio editor de código do Visual Studio. Esta é a forma mais comumente usada para depurar, já que o Visual Studio Code é o editor padrão escolhido para a maior parte do desenvolvimento Javascript atualmente.

Cada uma dessas abordagens é explicada em detalhes a seguir.

# 1) Usando o depurador nativo do Node

Para usar o depurador nativo Node JS, precisamos inserir a palavra-chave ‘debugger’ no teste, onde queremos colocar o ponto de interrupção.

Uma vez que o executor de teste encontra o depurador comando, ele pausa a execução e se anexarmos ferramentas de depuração do Chrome, então podemos depurar o código de teste (bem como a função em teste) usando as ferramentas do Chrome.

fazer loop while em shell script

O navegador Chrome é um pré-requisito aqui para usar o Node’s Native Debugger.

Siga os passos abaixo.

# 1) Adicione a palavra-chave do depurador no teste, ou seja, no ponto onde você gostaria que o teste atingisse o ponto de interrupção, insira o comando 'depurador'

#dois) Execute o teste usando o sinalizador –inspect-brk.

Use o comando abaixo para executar o teste em um modo de ponto de interrupção.

/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand

# 3) Anexe o depurador do Node no Chrome. Agora, no navegador Chrome, navegue até chrome: // inspect e conecte-se ao listener de destino criado pela etapa acima.

Nó

# 4) Continue a execução e você verá que o ponto de interrupção atinge o inspetor do depurador do cromo e você pode depurar a pilha de chamadas e o estado do objeto no próprio depurador do cromo.

chrome_debugger

Essa abordagem de depuração de testes Jest é boa, mas não muito amigável, pois você precisa continuar alternando do editor de código para o Chrome e vice-versa, o que causa muito atrito. Na próxima seção, veremos as maneiras de configurar o depurador no próprio editor de código do Visual Studio.

# 2) Usando a configuração de depuração do VS Code

# 1) Selecione a seção Debug / Run do Visual Studio Code no painel esquerdo.

Executar / Depurar

#dois) Agora, vamos atualizar a configuração de depuração para os testes de jest. Para fazer isso, adicione uma nova configuração selecionando a opção de menu.

selecione adicionar configuração

# 3) Assim que a opção adicionar configuração for selecionada, ele abrirá o arquivo `launch.json` com o conteúdo padrão no painel do editor. Remova o conteúdo padrão e copie o conteúdo abaixo para criar uma configuração de depuração para os testes Jest.

comando de corte em unix com exemplos
{ 'version': '0.2.0', 'configurations': ( { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': ( '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ), 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ) }

# 4) Salve a configuração de conteúdo recém-adicionada que seria usada para depurar os testes do Jest. Se você ler a configuração com atenção, é semelhante ao que fizemos quando tentamos nos conectar ao depurador Node nas ferramentas de desenvolvedor do Chrome por meio do comando.

--inspect-brk ./node_modules/jest/bin/jest.js --runInBand

A vantagem de ter config aqui é que os testes serão executados / depurados como parte do próprio Editor (neste caso, é VSCode) e não precisamos nos conectar a nenhum aplicativo externo.

# 5) Depois que a configuração de depuração é criada, agora você pode adicionar pontos de interrupção aos testes e executar usando esta configuração RUN. Isso garantirá que o teste pare nos pontos de interrupção e você possa depurar os valores e o estado do objeto no ponto de interrupção no arquivo de teste real.

Os pontos de interrupção podem ser adicionados clicando perto dos números das linhas nos arquivos de código.

Definir ponto de interrupção

# 6) Assim que o ponto de interrupção for adicionado, podemos selecionar a configuração de execução que adicionamos na etapa 3 para executar / depurar o teste.

Selecione Executar Configuração

# 7) Ao selecionar / clicar no botão Executar, você deve ser capaz de ver que a execução atinge o ponto de interrupção que foi colocado e você pode obter mais detalhes como valores de ambiente / variáveis, rastreamento de pilha, etc. no ponto de interrupção.

Os botões de controle de ponto de interrupção / fluxo de código podem ser usados ​​para mover para o próximo ponto de interrupção ou mover dentro da função para obter mais detalhes.

breakpoint_execution_jest

Tutorial de vídeo que ele éDepurando

Existe Mocha Vs Jasmine

Na seção a seguir, compararemos Jest vs Mocha e Jest vs Jasmine em diferentes parâmetros e comparações de recursos, como teste de instantâneo, facilidade de configuração e recursos de diferentes estruturas.

Parâmetro É Mocha Jasmim
Tipos de teste suportados Principalmente usado para testes de unidade.Teste de unidadeTeste de unidade e teste E2E.
Teste de instantâneo Totalmente compatível - usado especificamente para componentes React, Jest oferece suporte para tirar instantâneos de um componente e usá-lo para comparar a saída do teste com a estrutura do componente salva.
Instantâneos são uma ótima maneira de garantir que a IU não mude inesperadamente.		Sem suporteSem suporte
Assertions and Matchers Use a biblioteca expect.js para matchers.Suporte para o módulo assert integrado do Node e também pode incluir outras bibliotecas de asserção.Em asserções construídas
Zombando Suporte totalmente integrado para Mocks e Stubs no Jest.Sem suporte integrado para mocking ou stubbing.
Pode ser usado com outras bibliotecas como o Sinon para oferecer suporte a simulação.		Suporte limitado embutido usando o spyOn.
Pode se integrar com outras bibliotecas.
Velocidade de execução 4x
Os testes de brincadeira são isolados em sua própria caixa de areia. Assim, os testes de Jest são essencialmente executados em paralelo, devido ao qual fornecem melhorias consideráveis ​​nos tempos de execução.		x
Não suporta execução paralela de testes.		x
Não suporta execução paralela de testes.
Configuração e instalação Muito fácil - configuração zero necessária.
Modo de execução de teste Sem cabeçaSem cabeçaSem cabeça
Resultado do teste e contexto Gera pós-execução de contexto rico - Jest fornece contexto de teste detalhado para aprofundar o que causou uma falha, garantindo assim uma depuração fácil.A saída do teste não é muito legível e torna a depuração um pouco desafiadora.
Depurando O suporte para depuradores de Node nativos também pode ser usado para depurar em editores como o Visual Studio Code por meio de uma configuração de inicialização separada.Suporta depurador Node nativo.Pode usar o karma test runner para iniciar testes no Chrome e depurar.
Cobertura de código Jest tem suporte embutido para cobertura de código.
A configuração da cobertura pode ser especificada na configuração do Jest e os relatórios podem ser gerados com cada execução de teste.		Sem suporte embutido. Fornece suporte para bibliotecas externas para gerar relatórios de cobertura.O mesmo que Mocha
Estilo de teste BDD
Todos os três frameworks suportam testes a serem escritos como um conjunto de especificações ou especificações que os tornam mais legíveis.		BDDBDD

Conclusão

Neste tutorial, aprendemos sobre as diferentes maneiras de depurar seus testes Jest no Visual Studio Code ou no Chrome Inspector usando o depurador nativo do Node.

Também exploramos as opções de configuração comumente usadas no arquivo de configuração Jest. A configuração do Jest ajuda a alcançar muitas coisas como cobertura de código, relatórios Html, configuração de comportamentos simulados, configuração de variáveis ​​globais, etc.

PREV Tutorial | PRIMEIRO Tutorial

Leitura recomendada

^