fullstack react tdd example

React Development & Dom Testing Monorepo, orientado a componentes

Bem-vindo ao Desenvolvimento e Teste DOM de componentes React Monorepo! Este repositório contém todo o código e exemplos para uma palestra abrangente sobre a construção de aplicativos do React usando o desenvolvimento orientado a testes (TDD) e o teste DOM. Aqui está um link para a conversa em si. O Monorepo foi organizado usando o PNPM e o Turborepo para otimizar o gerenciamento de pacotes e criar processos.

Se você não está familiarizado com o conceito de Monorepo, é um repositório único que contém vários projetos. Nesse caso, o Monorepo contém uma biblioteca de interface do usuário compartilhada e alguns aplicativos de reação. A biblioteca de interface do usuário compartilhada contém componentes reutilizáveis e acessíveis, juntamente com seus testes e histórias. O aplicativo REACT demonstra o uso e a integração do componente. O aplicativo Next.js demonstra o poder da composição no React com o componente modal da biblioteca da UI da Mantina.

Você pode ler mais sobre monorepos aqui.

Visão geral

O objetivo principal deste Monorepo é demonstrar as melhores práticas para criar componentes de reação reutilizável e acessível e como testá -los efetivamente usando ferramentas como a React Testing Library e o Storybook. Além disso, ele mostra o uso de um trabalhador de serviço simulado para lidar com dependências externas nos testes e ilustra o padrão de back-end para fragilidade (BFF) em ação. A palestra é adaptada para um público com uma mistura de experiência front-end e back-end, enfatizando o poder da composição no React e como ela se aplica ao desenvolvimento e teste de componentes.

Por fim, vemos como podemos construir e testar esta interface:

Conteúdo

O Monorepo está estruturado da seguinte maneira:

Aplicativos

• frontend : um aplicativo REACT criado usando o aplicativo Create React para demonstrar o uso e a integração dos componentes.
• mantine-example : Um aplicativo Next.js demonstrando o poder da composição no React com o componente modal da biblioteca da UI da Mantina. Este aplicativo é usado como uma introdução à palestra, destacando os benefícios da composição ao criar e testar componentes de reação.

Pacotes

• ui : Um exemplo de uma biblioteca de interface do usuário compartilhada contendo componentes reutilizáveis e acessíveis, juntamente com seus testes e histórias.
• types : uma biblioteca compartilhada que contém tipos de texto de texto usado pelos outros pacotes.
• mocks : uma biblioteca compartilhada contendo dados simulados usados pelos outros pacotes.

Começando

Você precisará instalar o PNPM globalmente para executar o Monorepo.

A versão do PNPM usada ao desenvolver este Monorepo é 8.2.0 , e a versão 18.16.0 .

A versão do Storybook instalada tem problemas ao executar versões anteriores do nó. Por favor, use pelo menos o nó versão 18.16.0 .

Para instalar as dependências para o Monorepo, execute o seguinte comando:

pnpm install
pnpm build

O Monorepo pode ser executado usando os seguintes comandos:

• pnpm run dev : executa o Monorepo no modo de desenvolvimento.
• pnpm run build : constrói o monorepo para produção.
• pnpm run start : executa o Monorepo no modo de produção.
• pnpm run test : executa os testes Monorepo.

Para executar o Storybook, execute o seguinte comando:

pnpm run storybook

Testes de execução

Você pode executar todos os testes para o repositório ou executar testes para um pacote específico.

Para executar todos os testes, execute o seguinte comando:

pnpm run test

Para executar testes para um pacote específico, CD no diretório e execute o seguinte comando:

pn test -- --watch

Para executar os testes de aplicativo, execute o seguinte comando:

 cd apps/frontend
pnpm run test -- --watch

Para executar os testes de componentes, execute o seguinte comando:

 cd packages/ui
pnpm run test -- --watch

Espero que você ache esse monorepo útil para entender as melhores práticas para o desenvolvimento e o teste DOM orientados por componentes. Sinta -se à vontade para explorar o código, executar os exemplos e contribuir para o repositório. Codificação feliz!

Notas extras

Uma arquitetura de API sugerida para um front -end moderno é o back -end para o padrão de front -end:

Você pode ler mais sobre isso aqui.

Ai gerou notas para a conversa

Aqui está um resumo e as principais toca da apresentação:

Resumo: Paul Hammond, diretor da Pack Software, apresenta o desenvolvimento orientado a componentes com testes React e DOM, abrangendo tópicos como desenvolvimento, acessibilidade e práticas modernas de front-end.

Ideias:

• O desenvolvimento orientado a componentes ajuda a criar elementos de interface do usuário reutilizáveis e consistentes
• Testar contra o comportamento em vez de detalhes de implementação fornece mais valor
• A acessibilidade deve ser uma consideração importante ao criar componentes front-end
• Ferramentas como o Storybook permitem o desenvolvimento interativo e a documentação de componentes
• Mock Service Worker permite que a API de zombaria exige testes e desenvolvimento
• O padrão de back-end para o front-end (BFF) pode simplificar a arquitetura front-end
• Bons testes dão confiança para fazer mudanças ao longo do tempo
• React Testing Library incentiva os testes da perspectiva de um usuário
• TDD pode levar a um código mais sustentável e flexível
• Componentes composíveis permitem personalização e reutilização mais fáceis

PERCEPÇÕES:

• O comportamento de teste em vez da implementação permite uma refatoração e manutenção facilmente
• Seletores acessíveis em testes podem melhorar a acessibilidade geral do aplicativo
• Exploradores de componentes como Storybook facilitam a colaboração entre designers e desenvolvedores
• Zombando no nível da rede permite zombarias consistentes em testes e desenvolvimento
• TDD pode levar a loops de feedback mais rápido e maior confiança nas mudanças de código
• O foco nos resultados da entrega pode ajudar a convencer as equipes a adotar práticas de TDD
• O uso do DOM para testar imita de perto as interações reais do usuário real
• Separar as preocupações da interface do usuário da lógica de negócios melhora a arquitetura geral de aplicativos
• Práticas contínuas de entrega como "esqueletos de caminhada" podem melhorar a configuração do projeto
• Testes de unidade de equilíbrio com testes de integração/e2e abrange diferentes cenários de teste

CITAÇÕES:

• "O objetivo de bons testes é nos dar a confiança para fazer alterações ao longo do tempo".
• "Se os testes estão passando, devemos nos sentir confiantes o suficiente para ir direto para a produção".
• "As extremidades dianteiras modernas são construídas com componentes e não páginas".
• "O desenvolvimento orientado a componentes nos ajuda a criar componentes reutilizáveis que reduzem a duplicação".
• "Queremos ver como fazemos mudanças ao longo do tempo, como os testes nos ajudam a fazer alterações ao longo do tempo".
• "Bons testes devem nos dar a confiança para fazer mudanças ao longo do tempo".
• "A alegria do TDD é a maneira certa de colocá -la, porque é uma experiência tão libertadora".
• "Não trabalho tarde há 10 anos e porque não preciso, e você não precisa se escrever em um estilo de teste primeiro".
• "Quando se trata de testar, uma das coisas que eu normalmente faço é ... eu puxava a ramificação de alguém, executava os testes, deliberadamente falhava em algo e viu os testes".
• "Eu preciso ter confiança que é assim que funciona".

Hábitos:

• Escreva testes antes do código de implementação para garantir a cobertura adequada do teste
• Use seletores acessíveis em testes para melhorar a acessibilidade geral
• Colabore de perto com designers usando ferramentas como o Storybook
• Refactor Código com confiança com uma forte suíte de teste no lugar
• Execute testes no modo de relógio para feedback instantâneo durante o desenvolvimento
• Use trabalhadores de serviço simulado para simular as respostas da API em testes
• Construir esqueletos para ambientes para estabelecer pipelines de IC/CD no início dos projetos
• Revise as solicitações de puxar, quebrando o código intencionalmente para verificar a cobertura do teste
• Priorizar o comportamento do teste sobre os detalhes da implementação nos testes de front-end
• Aprenda e aplique continuamente as melhores práticas no desenvolvimento do front-end

Fatos:

• A biblioteca de testes de reação é construída sobre a biblioteca de testes de DOM
• JEST usa uma representação de DOM na memória chamada JSDOM para testes
• Mock Service Worker pode interceptar e zombar de chamadas de API no nível da rede
• Storybook é uma ferramenta para o desenvolvimento de componentes da interface do usuário isoladamente
• A acessibilidade afeta 30-40% da população de alguma forma
• O desenvolvimento orientado a componentes é a estrutura-agnóstico e se aplica a reagir, vue, angular, etc.
• O desenvolvimento orientado a testes pode levar a menos bugs e um código mais sustentável
• O back-end para o padrão de front-end pode melhorar o desempenho do front-end e simplificar a arquitetura
• Cypress e dramwright são ferramentas para testes de ponta a ponta de aplicativos da web
• O teste de mutação pode ser usado para verificar a qualidade das suítes de teste

Referências:

• React Testing Library
• Livro de histórias
• Mock Service Worker
• Jove
• Cipreste
• Dramaturgo
• Redux Toolkit
• Reação de consulta
• Testando JavaScript (de Kent C. Dodds)
• Iniciativa de Acessibilidade da Web W3C (WAI)
• A palestra de Ian Cooper "TDD: onde tudo deu errado"
• Github Primer (biblioteca de componentes da interface do usuário)
• Testando o playground da biblioteca
• Back -end para padrão de front -end (BFF)

Takeaway de uma frase: desenvolvimento orientado a testes com a biblioteca de testes React permite um código de front-end confiante e sustentável, concentrando-se no comportamento e na acessibilidade.

Recomendações:

• Adote o desenvolvimento orientado a componentes para melhorar a reutilização e a consistência em aplicativos front-end
• Use o Storybook ou ferramentas semelhantes para desenvolver e documentar componentes da interface do usuário
• Implementar práticas de desenvolvimento orientadas a testes para o código front-end para melhorar a qualidade
• Concentre -se no comportamento do teste, em vez de detalhes de implementação para testes mais resilientes
• Utilize trabalhador de serviço simulado para uma zombaria consistente de API em testes e desenvolvimento
• Considere a implementação de um back-end para o padrão de front-end para simplificar a arquitetura front-end
• Priorize a acessibilidade no design e teste de componentes desde o início
• Use os seletores acessíveis da biblioteca de testes React para melhorar a acessibilidade geral do aplicativo
• Implementar práticas contínuas de integração e entrega no início dos projetos
• Balance testes de unidade com integração e testes de ponta a ponta para cobertura abrangente