Em meu post anterior, discuti como utilizar a React Testing Library para testar aplicações React. Recentemente, o Cypress introduziu uma nova forma de testar componentes sem a necessidade de uma solução end-to-end completa. Decidi experimentar e fiquei agradavelmente surpreso com sua eficácia. Integrei-o sem problemas ao meu projeto atual, que possui uma base de código robusta. Este tipo de teste é ideal para cenários comuns, como aquele descrito no meu último post, e vou demonstrá-lo novamente aqui usando o Cypress. Já abordei a importância dos testes em meu blog anterior, então vamos direto ao código.

Passo 1: Iniciar o Repositório

Primeiramente, criaremos uma nova aplicação Next.js. Atualmente, o Cypress não suporta testes de componente com componentes de servidor ou versões do Next.js acima de 14. Para mais detalhes, consulte a documentação do Next.js sobre testes com Cypress.

npx create-next-app@latest blog-todo-graphql --typescript

Passo 2: Instalar Apollo Client e GraphQL

Em seguida, instalaremos o Apollo Client e o GraphQL para lidar com nossas consultas e mutações GraphQL, além de não esquecer da biblioteca Cypress.

npm install @apollo/client graphql cypress

Passo 3: Organização da Estrutura do Projeto

Limparemos a estrutura do projeto excluindo a pasta api.

Passo 4: Ajustar o Arquivo index.tsx

Atualize o arquivo index.tsx para incluir o seguinte conteúdo:

import AddTodo from "@/components/add-todo";
import ListTodos from "@/components/list-todos";
const Home = () => { return ( <div> <h1>Todo List</h1> <AddTodo /> <ListTodos /> </div> );
};
export default Home;

Passo 5: Adicionar os Arquivos Necessários ao Projeto

Aqui estão os arquivos que precisamos adicionar ao nosso projeto, junto com uma breve explicação de seus propósitos:

• schemas/index.gql – Define o esquema GraphQL para nossa aplicação Todo, incluindo o tipo Todo, uma consulta para buscar todos e uma mutação para adicionar um novo.
• components/add-todo.tsx – Este componente fornece um formulário para adicionar novos todos. Ele usa o Apollo Client para enviar uma mutação GraphQL para adicionar o todo e busca novamente a lista de todos após adicionar um novo.
• components/list-todos.tsx – Este componente busca e exibe uma lista de todos usando o Apollo Client. Mostra estados de carregamento e erro enquanto os dados estão sendo buscados.
• mocks/apollo-mock-provider.tsx – Este componente fornece um Apollo Client fictício para fins de teste. Ele usa o MockedProvider de @apollo/client/testing para fornecer dados fictícios para nossos testes.

Executando Seu Teste

Para abrir a GUI de Teste de Componente do Cypress, use o seguinte comando:

npx cypress open --component

Vantagens dos Testes Independentes

Como você pode ver, neste setup, não precisamos adicionar o componente ApolloProvider à nossa aplicação principal, apenas o MockedProvider para nossos testes. É importante notar que o ApolloProvider e MockedProvider têm propósitos diferentes e são independentes um do outro. Uma vez que este conteúdo foca em demonstrar os testes e não a aplicação em execução, não precisamos adicionar o ApolloProvider aqui. No entanto, em uma aplicação real, você deve incluir o ApolloProvider para integrar sua aplicação com a API real.

Conclusão

O teste de frontend é uma parte indispensável do desenvolvimento web moderno. Ele garante que sua aplicação seja confiável, mantida e ofereça uma ótima experiência ao usuário. Se você leu meu artigo anterior e tentou usar a React Testing Library, verá que o Teste de Componente Cypress é muito mais fácil para cenários mais complexos. Por que não experimentar esta nova abordagem e compartilhar suas experiências comigo? Estou ansioso para ouvir sobre seus resultados. Testes felizes! Inscreva-se na newsletter do blog devdaily.info para mais dicas e truques de desenvolvimento!