Última parte da série! Desta vez, faremos nossa página responsiva a dispositivos móveis, bem como conduziremos testes com nosso front-end React usando Enzyme & Jest.

Perdeu a parte três? Certifique-se de ler isso antes de prosseguir.

Web design responsivo

Todos os dispositivos foram criados de forma diferente. Em abril de 2021, o monitor de computador mais usado é 1920x1080. No ano passado, a parcela do tráfego durante a pandemia foi gasta em dispositivos móveis que normalmente têm um tamanho de tela e resolução pequenos. Recentemente, smartphones com recursos de tela dupla também entraram no mercado. Precisamos estar atentos aos dispositivos usados ​​e como isso pode potencialmente impactar como nosso site é visto pelo usuário. Felizmente, o TailwindCSS tem um utilitário para isso.

Podemos configurar pontos de interrupção com base nos tamanhos de exibição para atender a todos os dispositivos. Primeiro, você terá que configurar seu arquivo tailwind.config.js para adicionar tamanhos de tela específicos. Atualmente, eu tenho configurado assim:

Incluí resoluções que variam de largura de 640 pixels de um Pixel 2 a um monitor com largura de 1920 pixels. Poderemos usar esses pontos de interrupção para controlar a aparência de nosso front-end no celular.

Atualmente, estamos usando uma grade em nossa seção de informações. No momento, não estamos controlando como isso fica em dispositivos menores. Se não mudarmos isso, nossas caixas de grade se sobreporão e terão a seguinte aparência:

Podemos mudar sua aparência especificando como queremos que a grade se pareça em cada ponto de interrupção. Esta é a aparência do nosso código:

Em viewports maiores, teremos uma visualização de grade horizontal usando grid-cols-3. Em monitores menores, vamos mudar para uma visualização de grade vertical usando grid-cols-1.

Enzyme with Jest Testing

Estaremos usando Enzyme and Jest para testar nosso front-end. Instalaremos as dependências do Enzyme (caso ainda não o tenha feito) usando esta linha:

npm i --save-dev enzyme enzyme-adapter-react-16

A seguir, configuraremos nosso adaptador da biblioteca Enzyme em nosso arquivo setupTests.js.

Nosso arquivo App.test.js conterá nossos testes. Vamos importar nossa biblioteca de testes do React and Enzyme, seguida pelos componentes que usaremos para os testes. Vamos testar a renderização de nosso componente, começando com App e Nav.

Estamos verificando se o componente App e Nav será renderizado. Vamos executar os testes usando:

npm run test

Vamos testar a renderização do componente Nav e esperar que ele renderize os links da barra de navegação também. Também testaremos nosso componente Hero para ver se ele renderiza contendo nosso src de imagem.

Se feito corretamente, todos os testes devem passar!

O mesmo pode ser feito para os próximos componentes que requerem teste, portanto, o código final deve ser semelhante a este:

Se você quiser adicionar mais testes, é definitivamente possível. Uma vez que contém principalmente testes de renderização de componentes, é bastante simples de resolver. Depois de entrar na lógica do componente de teste, os testes parecerão mais complexos.

Isso conclui minha série sobre como criar um aplicativo React.js e estilizá-lo com TailwindCSS! Incluirei alguns links de recursos abaixo e um link para o repositório que incluirá a demonstração.

Links de Projeto

• Git Repo

• LinkedIn
• GitHub
• Twitter
• Instagram
• YouTube

Recursos

• Documentação TailwindCSS
• Documentação Enzimática
• Documentação Jest
• Documentação React.js