O desenvolvimento de front-end envolve a construção de aplicativos visualmente atraentes e funcionais voltados para o cliente. Mas há um problema; esses aplicativos devem garantir que os usuários tenham uma experiência perfeita.

Embora os testes unitários e de integração sejam essenciais para verificar a funcionalidade de um aplicativo, eles podem não capturar inteiramente as interações típicas do usuário. Para realmente simular a jornada de um usuário, você precisa executar testes completos que reproduzam as interações reais do usuário. Isso garantirá que seu aplicativo funcione conforme planejado do início ao fim.

Primeiros passos com testes ponta a ponta usando Cypress

O principal objetivo dos testes ponta a ponta em aplicativos front-end é verificar os resultados, e não os detalhes de implementação da lógica de negócios.

Veja um formulário de login como exemplo. Idealmente, você testaria se a tela de login aparece da maneira que deveria e faz o que deveria fazer. Essencialmente, os detalhes técnicos subjacentes não são importantes. O objetivo final é simplesmente se colocar no lugar do usuário e avaliar toda a sua experiência.

Cipreste é uma excelente estrutura de testes de automação compatível com alguns dos as estruturas JavaScript mais populares. Sua capacidade de executar testes diretamente no navegador e seu conjunto abrangente de recursos de teste tornam os testes contínuos e eficientes. Ele também oferece suporte a várias abordagens de teste, incluindo:

• Testes unitários
• Testes ponta a ponta
• Testes de Integração

Para escrever testes ponta a ponta para um aplicativo React, considere estas histórias de usuários:

• Um usuário pode ver um campo de entrada com um botão de envio correspondente.
• Um usuário pode inserir uma consulta de pesquisa no campo de entrada.
• Depois de clicar no botão enviar, o usuário deverá ver uma lista de itens exibidos logo abaixo do campo de entrada.

Seguindo essas histórias de usuários, você pode construir um aplicativo React simples que permite ao usuário pesquisar produtos. O aplicativo irá buscar dados do produto no API DummyJSON e renderizá-lo na página.

Você pode encontrar o código deste projeto em seu GitHub repositório

Configure um projeto React

Para começar, crie um projeto React usando Vite ou use o Comando create-react-app para configurar um aplicativo React básico. Assim que o processo de instalação for concluído, instale o pacote Cypress como uma dependência de desenvolvimento em seu projeto:

npm install cypress --save-dev

Agora, atualize seu pacote.json arquivo adicionando este script:

"test": "npx cypress open"

Crie um componente funcional

No fonte diretório, crie uma pasta e nomeie-a componentes. Dentro desta pasta, adicione um novo produtos.jsx arquivo e inclua o código abaixo.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (

"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>


Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

Dentro do componente funcional, defina um useEfeito hook, que executa uma função assíncrona que busca os dados do produto com base na consulta de pesquisa fornecida.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

Atualize o arquivo App.jsx

Agora, atualize o Aplicativo.jsx arquivo com o seguinte código:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');
const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }
return (



Cypress Testing Library tutorial</h1>
"input">Input</label>

 id="text"
 type="text"
 ref={searchInputRef}
 />


"btn" type="button" onClick={handleSubmit}>Submit</button>
"products-component" searchInput={searchInput} /> 
 </div>
 )
}
exportdefault App

Vá em frente e inicie o servidor de desenvolvimento.

npm run dev

Ótimo! Você deve ser capaz de buscar dados específicos do produto na API JSON fictícia.

Configure o ambiente de teste

Primeiro, execute o comando de script de teste em seu terminal:

npm run test

Este comando irá acionar e abrir o cliente Cypress. Vá em frente e clique no Teste E2E botão.

A seguir, clique Continuar para adicionar arquivos de configuração do Cypress.

Assim que esse processo for concluído, você deverá ver um novo diretório de testes Cypress em seu projeto. Além disso, o cliente Cypress adiciona automaticamente o arquivo cypress.config.js. Você pode atualizar esse arquivo para personalizar ainda mais vários aspectos do seu ambiente de teste, comportamento e configuração.

Escreva testes ponta a ponta usando Cypress

Para escrever seu primeiro teste, você precisa selecionar o navegador no qual o teste será executado. Selecione sua opção preferida entre as disponíveis no cliente Cypress.

Cypress lançará uma versão simplificada do navegador que você escolheu, criando um ambiente controlado para executar testes.

Selecione os Criar nova especificação opção para criar seu arquivo de teste.

Vá para o seu editor de código, abra o cipreste/e2e/App.spec.cy.js arquivo e atualize o conteúdo desse arquivo com o código a seguir.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

Voltando às histórias de usuários destacadas acima, este conjunto de testes específico verifica dois aspectos:

• Que o navegador exiba um campo de entrada e um botão de envio na página.
• Que o uso possa inserir uma consulta de pesquisa.

Como outras ferramentas de teste de JavaScript, como Jest e Supertest, Cypress emprega sintaxe e linguagem declarativa para definir casos de teste.

Para executar o teste, retorne à versão simplificada do navegador gerenciada pelo Cypress e escolha o arquivo de teste específico que deseja executar.

Cypress executará os testes e exibirá os resultados no painel esquerdo do playground de testes.

Simulação de processos de aplicação

Para garantir que você passe e teste toda a jornada do usuário – neste caso de uso específico – você precisa verificar se o aplicativo pode receber a entrada do usuário, buscar os dados necessários e, por último, exibir os dados no navegador página.

Para maior clareza, você pode criar um novo arquivo de teste para acomodar um conjunto de testes diferente dentro do e2e pasta. Alternativamente, você também pode optar por incluir todos os conjuntos de testes que exploram um caso de teste específico em um arquivo de teste.

Vá em frente e crie um novo Produtos.spec.cy.js arquivo no e2e pasta. Dentro deste arquivo, inclua o seguinte código.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

Este conjunto de testes verifica se, assim que um usuário envia um item de pesquisa específico, o aplicativo busca e exibe os dados na página do navegador.

Isso é feito simulando o processo de inserção do input de pesquisa, clicando no botão enviar, aguardando o produtos a serem carregados e, em seguida, verificando a presença de itens do produto, juntamente com detalhes como título e preço. Em essência, ele captura e verifica toda a experiência da perspectiva do usuário.

Simulando Erros e Respostas

Você também pode simular vários cenários de erro e respostas em seus testes Cypress.

Crie um novo Erro.spec.cy.js arquivo no e2e diretório e inclua o seguinte código.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');
const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();
 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

Este conjunto de testes verifica se uma mensagem de erro é exibida quando um usuário insere uma consulta de pesquisa incorreta.

Para que o caso de teste seja aprovado, ele usa o Cypress' interceptar função para fazer stub da rede e simular um erro de solicitação de rede. Em seguida, ele verifica se, após inserir uma consulta de pesquisa incorreta no campo de entrada e iniciar o processo de busca, uma mensagem de erro – Produto não encontrado – é exibida visivelmente na página.

Este resultado indica que o mecanismo de tratamento de erros está funcionando conforme esperado.

Usando Cypress no desenvolvimento orientado a testes

O teste é um requisito fundamental de desenvolvimento, mas também pode ser um processo demorado. No entanto, incorporar o Cypress pode trazer a pura satisfação de observar seus casos de teste sendo executados juntos.

Cypress é uma ótima ferramenta para implementar desenvolvimento orientado a testes em aplicativos – ele não apenas fornece um conjunto abrangente de recursos de teste, mas também oferece suporte a várias estratégias de teste. Para aproveitar ao máximo o Cypress, vá em frente e explore sua documentação oficial para descobrir muito mais recursos de teste.