import React from"react";
importar renderizador de"react-test-renderer";
importar Navbar de"./Navbar.js" descrever ("", ()=> { it ('renderiza corretamente nas telas', ()=> { const tree=renderer.create (). toJSON (); esperar (árvore).toMatchSnapshot ();
});

Alguns dos prós de usar Jest incluem:

• Variedade: Jest oferece testes de instantâneo, assíncronos e de paralelização
• Simulação: Jest oferece a capacidade de simular funções de API e bibliotecas de terceiros
• Controle: Jest apresenta um guia de relatório de código e sintaxe

Um dos contras de Jest é que ele requer outras estruturas de teste de terceiros, como Enzyme, para melhorar seu desempenho. Além disso, ele pode ter dificuldade quando usado em grandes projetos que apresentam diferentes tipos de testes, como testes de integração.

Você pode ver a documentação do Jest para saber mais sobre como testar o Jest.

Mocha

Mocha é uma estrutura JavaScript que roda em Node.js e é usado para testar aplicativos React. Possui suporte a navegador, teste assíncrono e uso de bibliotecas de asserção. Com o Mocha, um desenvolvedor tem controle total sobre quais ferramentas e plug-ins usar ao testar aplicativos. Devido às configurações e recursos específicos que fornece para testar aplicativos React, o Mocha se destaca em testes de simulação.

Instalação

Para testar aplicativos React com Mocha, primeiro instale o Mocha como uma dependência de desenvolvimento em seu projeto React usando o comando abaixo:

 npm i--save-dev mocha

Se você estiver usando o Yarn como seu gerenciador de pacotes, use este comando:

 fio adicionar mocha

Em seguida, atualize o script test em seu package.json para incluir o Mocha:

 { "scripts": { "teste":"mocha" }
}

Veja o uso abaixo:

//test/test.js var modal=requer ('modal'); describe ('Array', function () { describe ('# indexOf ()', function () { it ('deve retornar 0 quando o valor não estiver presente', function () { assert.equal ([1, 2, 3, 4, 5].indexOf (6),-3); }); });
});

O teste acima procurou um número 6 na matriz e retornou -3 se o índice do número não foi encontrado.

Alguns dos prós de usar Mocha incluem o seguinte:

• Suporta desenvolvimento orientado a comportamento (BDD) e desenvolvimento orientado a testes (TDD)
• Apresenta teste assíncrono fácil
• Suporta geradores para testar facilmente os conjuntos quando é necessário no arquivo de teste
• Oferece suporte altamente extensível para várias bibliotecas de asserção e simulação

Você pode ler mais sobre o Mocha em sua documentação oficial

Jasmim

Jasmine é uma estrutura de teste simples de JavaScript para navegadores e Node.js. O Jasmine segue um padrão de desenvolvimento orientado por comportamento, portanto, a configuração geralmente é feita antes do uso. Com o Jasmine, os desenvolvedores podem testar a visibilidade e a resolução das interfaces do usuário em diferentes dispositivos. Para usar Jasmine no teste de aplicativos React, os desenvolvedores podem adicionar outras estruturas de terceiros, como Enzima .

Instalação

Os desenvolvedores costumam usar Jasmine em conjunto com o Enzyme, portanto, ele precisa ser instalado como parte das configurações.

 yarn add-D babel-cli \ @ babel/register \ babel-preset-react-app \ cross-env \ enzima \ enzima-adaptador-react-16 \ jasmim-enzima \ jsdom \ jasmim

A seguir, inicialize o Jasmine usando o comando abaixo:

//Para NPM npm execute jasmine init //For Yarn
yarn run jasmine init

Jasmine requer colocar todos os arquivos de configuração, incluindo Babel, Enzyme e JSDOM, em uma pasta spec .

//babel.js
require ('@ babel/register'); //para texto datilografado
require ('@ babel/register') ({ "extensões": [".js",".jsx",".ts",".tsx"]
}); //enzima.js ou enzima.ts
//certifique-se de que a extensão do arquivo é.ts se o seu projeto for um projeto de texto digitado
import jasmineEnzyme from'jasmine-enzima';
importar {configurar} de'enzima';
importar adaptador de'enzima-adaptador-react-16'; configurar ({adaptador: novo adaptador ()}); beforeEach (function () { jasmineEnzyme ();
}); //jsdom.js importar {JSDOM} de'jsdom'; const dom=new JSDOM ('& lt; html & gt; & lt; body & gt; & lt;/body & gt; & lt;/html & gt;');
global.document=dom.window.document;
global.window=dom.window;
global.navigator=dom.window.navigator;

Em seguida, navegue até o arquivo do projeto para trabalhar com spec/support/jasmine.json e edite a configuração para permitir que outras bibliotecas de terceiros funcionem com Jasmine.

//para projetos normais "ajudantes": [ "helpers/babel.js", "helpers/**/*. js"
], //para projetos de texto datilografado "ajudantes": [ "helpers/babel.js", "helpers/**/*. {js, ts}"
],

A maioria da arquitetura de teste e funções auxiliares do Jasmine são muito semelhantes a Jest .

Alguns dos prós do Jasmine incluem o seguinte:

• Não requer DOM para testar
• Pode ser usado para testes de front-end e back-end
• Pode ser usado para testes de função assíncrona
• Apresenta uma declaração de verificador de igualdade personalizada
• Vem com uma afirmação de matcher embutida

Apesar de seus benefícios, Jasmine não é a estrutura de teste perfeita para aplicativos React. Ele não oferece suporte a testes de instantâneo e requer bibliotecas de terceiros para paralelização e manipulação de DOM nativo.

Enzima

Enzyme é um utilitário de teste de JavaScript para React que torna mais fácil testar a saída dos componentes do React. Desenvolvido e mantido pela Airbnb, o Enzyme é amplamente usado por desenvolvedores em conjunto com outras bibliotecas de terceiros, como Jest e Chai .

Para usar Enzyme, instale:

 npm i-D enzima-adaptador-reagente-16

Em seguida, crie um arquivo enzima.js em seu diretório src e escreva o bloco de código abaixo

 importar Enzima, {configurar, raso, montar, renderizar} de'enzima';
importar adaptador de'enzima-adaptador-react-16'; configurar ({adaptador: novo adaptador ()});
export {raso, montagem, render};
exportar Enzima padrão;

Aqui, você fará um teste superficial de um componente usando a Enzyme abaixo:

 import React from'react';
//estamos importando de nosso enzima.js
importar {raso} de'./enzyme';
importar FootNav de'./FootNav'; descrever ('FootNav', ()=& gt; { test ('renderiza o texto correto no componente', ()=& gt; { const wrapper=shallow (& lt; MyComponent label="Contact Fortune"/& gt;); expect (wrapper.find ('. my-label'). get (0).props.children).toEqual ('Contact Fortune'); });
});

No teste acima, você importou raso da Enzyme e um componente FootNav . Em seguida, você descreveu o componente e verificou se ele foi renderizado corretamente e retornou o texto esperado, que em nosso caso é Hello Fortune . Para terminar o teste, você coloca nossa expectativa, que o primeiro filho da matriz retorna o texto, Hello Fortune .

As vantagens da enzima incluem o seguinte:

• Suporta renderização superficial
• Recursos de suporte para renderização DOM
• Suporta o uso de react-hooks em renderização superficial
• Pode simular um tempo de execução em relação à saída do teste

Apesar de ser uma estrutura de teste poderosa, Enzyme tem uma série de desvantagens. Por um lado, o Enzyme é construído em um react-dom personalizado, então às vezes não pode suportar certos novos recursos do React. Por outro lado, a Enzyme incentiva o uso de seletores de ID e CSS, que às vezes quebram o código quando refatorados.

Você pode aprender mais sobre a Enzyme lendo a documentação oficial.

Biblioteca de teste React

Com mais de 12 milhões de downloads por mês, a React Testing Library é uma das mais amplamente utilizou estruturas de teste para aplicativos React. Foi criado por Kent C. Dodds e atualmente é suportado pela comunidade de código aberto. A Biblioteca de Testes React permite que os desenvolvedores testem componentes para simular o comportamento de um usuário facilmente. Além disso, ele vem integrado com utilitários de teste React DOM que emula ações reais do usuário em um aplicativo React.

Para usar a Biblioteca de testes React, primeiro instale usando o bloco de código abaixo:

 npm install--save-dev @ testing-library/react

Ou usando o Yarn:

 yarn add--dev @ testing-library/react

Uso

 import * as React from'react' função modal ({crianças}) { const [showModal, setShowModal]=React.useState (false) Retorna ( 
  Olá, este é um modal   setShowModal (e.target.checked)} verificado={showModal} /> {showModal? filhos: null} 
 )
} exportar modal padrão

A biblioteca de testes do React oferece suporte a ganchos e classes, portanto, os testes são consistentes, independentemente de você usar componentes de classe ou função.

Alguns prós de usar a Biblioteca de Testes React incluem:

• Oferece suporte a testes de comportamento do usuário
• Vem embutido com utilitários de teste DOM
• Facilita a emulação de fluxos de trabalho e ações do usuário
• É compatível com outras estruturas de IU, como angular e Vue.

Alguns contras do React Testing Library incluem a falta de suporte para renderização superficial e incapacidade de acessar o estado do componente.

Resumo

Testar os aplicativos React é muito importante para o desenvolvimento hoje. Essas bibliotecas tornam mais fácil do que nunca criar aplicativos React melhores e melhorar a experiência geral do usuário. Bibliotecas como Jest são mais adequadas para testar projetos maiores, enquanto outras bibliotecas, como React Testing Library, são mais adequadas para testar comportamentos de usuário e oferecer suporte a componentes de classe ou função.

A postagem Principais bibliotecas de teste para React em 2021 apareceu primeiro no LogRocket Blog .

Source link