Jest: torne seu código mais seguro e confiável
jest
testing-component
jest.mock
tests-library-react
unitary tests
coverage
DOM-events-testing
Se você desenvolve em React, provavelmente já ouviu falar do Jest - uma das ferramentas mais populares para testes de JavaScript. O Jest é fácil de usar e oferece uma ampla gama de recursos para testar componentes, funções e bibliotecas. No conteúdo desse posts, será mostrado como instalar e configurar o Jest e react-testing-library, e como escrever testes para seus projetos. Introdução ao Jest - O que é o Jest e por que usá-lo? O Jest foi projetado para ser fácil de usar e oferece recursos poderosos para testar projetos em JavaScript, incluindo suporte para testes assíncronos e testes de integração. É muito popular entre os desenvolvedores do React, pois possuí fácil integração e oferece uma variedade de recursos para testar componentes React. O Jest também é rápido, o que significa que você pode executar seus testes mais rapidamente do que com outras estruturas de teste. O Jest executa testes em paralelo, o que pode economizar tempo em projetos maiores. Além disso, o Jest tem uma sintaxe intuitiva que torna a criação de testes mais simples e fácil de entender. Instalando o Jest e a biblioteca de testes do React Antes de começar a usar o Jest, você precisará instalá-lo em seu projeto. Felizmente, a instalação do Jest é simples e rápida. Primeiro, você precisará instalar o Node.js em seu computador, se ainda não o fez. Depois de instalar o Node.js, você pode instalar o Jest usando o npm. Basta abrir o terminal e digitar o seguinte comando: npm install --save-dev jest @testing-library/react @testing-library/jest-dom Configurando o Jest em seu projeto Agora que o Jest está instalado em seu projeto, você precisa configurá-lo. Você pode configurar o Jest adicionando um arquivo de configuração na raiz do seu projeto chamado jest.config.js. Este arquivo permite que você configure várias opções para o Jest, como o diretório de arquivos de teste, o padrão de nomenclatura para arquivos de teste e outras opções. Aqui está um exemplo básico de um arquivo de configuração: module.exports = { testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"], testPathIgnorePatterns: ["/node_modules/"], }; Este arquivo de configuração diz ao Jest para procurar arquivos de teste no diretório tests e em qualquer arquivo que termine com .spec.js ou .test.js. Ele também diz ao Jest para ignorar o diretório node_modules. Noções básicas de testes com Jest Crie um arquivo chamado sum.test.js no diretório tests. Adicione o seguinte código ao arquivo: function sum(a: number, b: number) { return a + b; } test("adds 1 + 2 to equal 3", () => { expect(sum(1, 2)).toBe(3); }); Este teste verifica se a função sum adiciona corretamente dois números. O teste é executado usando a função test do Jest. A função test recebe dois argumentos - uma descrição do teste e uma função que contém a lógica do teste. A função de teste usa a função expect do Jest para verificar se a saída da função sum é igual a 3. Para executar o teste, abra o terminal e execute o seguinte comando: npm run test Este comando inicia o Jest e executa todos os testes em seu projeto. Você verá a saída do Jest no terminal, que mostrará se o teste passou ou falhou. Testando componentes React com Jest e @testing-library/react Jest é amplamente utilizado para testar aplicativos React. Para testar componentes React com o Jest, você pode usar a biblioteca de teste @testing-library/react. Esta biblioteca fornece funções para simular eventos do usuário, acessar elementos DOM e verificar o estado do componente. Aqui está um exemplo de teste de componente React usando o @testing-library/react: import { Button } from "@components/button"; import { render } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; describe("Button", () => { it("renders a button", () => { const { getByText } = render(<Button label="Click Me" />); const button = getByText("Click Me"); expect(button).toBeInTheDocument(); }); it("calls onClick when button is clicked", () => { const onClick = jest.fn(); const { getByText } = render(<Button label="Click Me" onClick={onClick} />); const button = getByText("Click Me"); userEvent.click(button); expect(onClick).toHaveBeenCalled(); }); }); Este teste verifica se um componente Button é renderizado corretamente e se a função onClick é chamada quando o botão é clicado. O teste usa a função render do @testing-library/react para renderizar o componente Button. Ele usa a função getByText para obter o elemento DOM do botão e a função userEvent para simular um clique no botão. Ele usa a função jest.fn para criar uma função mock para onClick e a função toHaveBeenCalled para verificar se a função mock foi chamada. Simulação de componentes Jest Às vezes, você pode precisar isolar um componente durante um teste e simular um ou mais de seus filhos. O Jest fornece uma maneira fácil de fazer isso usando a função jest.mock Aqui está um exemplo de teste que simula um componente filho em um componente pai: import Parent from "@components/button"; import { render } from "@testing-library/react"; jest.mock("./Child", () => <div>Mock Child Component</div>); test("renders the parent component with a mocked child", () => { const { getByText } = render(<Parent />); const child = getByText("Mock Child Component"); expect(child).toBeInTheDocument(); }); Este teste simula um componente Child em um componente Parent. Ele usa a função jest.mock para substituir o componente Child por um componente mock. O teste usa a função render para renderizar o componente Parent e a função getByText para obter o elemento DOM do componente filho simulado. Testando componentes de botão React passo a passo Os componentes de botão são comuns em aplicativos React e podem ser facilmente testados com o Jest. Aqui está um guia passo a passo para testar componentes de botão com o Jest: Crie um arquivo chamado Button.test.js no diretório tests. Importe o componente Button e a biblioteca de teste @testing-library/react. Escreva um teste que verifica se o componente Button é renderizado corretamente. Escreva um teste que verifica se a função onClick é chamada quando o botão é clicado. Escreva um teste que verifica se o botão está desabilitado quando a propriedade disabled é definida como verdadeira. Aqui está um exemplo de código para testar um componente de botão: import Button from "./Button"; import { render } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; describe("Button", () => { it("should be renders a button", () => { const { getByText } = render(<Button label="Click me" />); const button = getByText("Click me"); expect(button).toBeInTheDocument(); }); it("should be calls onClick when button is clicked", () => { const onClick = jest.fn(); const { getByText } = render(<Button label="Click me" onClick={onClick} />); const button = getByText("Click me"); userEvent.click(button); expect(onClick).toHaveBeenCalled(); }); it("should be disables the button when disabled is true", () => { const { getByText } = render(<Button label="Click me" disabled />); const button = getByText("Click me"); expect(button).toBeDisabled(); }); }); Este código testa se o componente Button é renderizado corretamente, se a função onClick é chamada quando o botão é clicado e se o botão está desabilitado quando a propriedade disabled é definida como verdadeira. Cobertura de Teste Jest O Jest fornece uma ferramenta de cobertura de código que ajuda a verificar se seus testes estão cobrindo todo o seu código. A cobertura de código é uma medida da porcentagem de código que é executada durante a execução dos testes. Quanto maior a cobertura de código, maior a probabilidade de encontrar erros em seu código. Para usar a ferramenta de cobertura de código do Jest, execute o seguinte comando no terminal: npm run test -- --coverage Este comando inicia o Jest e executa todos os testes em seu projeto, além de gerar um relatório de cobertura de código. Você pode abrir o arquivo coverage/lcov-report/index.html em seu navegador para ver o relatório de cobertura de código Técnicas avançadas Jest O Jest fornece muitos recursos avançados para testes, como testes paralelos, testes em tempo real e testes de integração. Aqui estão algumas dicas para usar esses recursos avançados: Use a opção --watch do Jest para executar testes em tempo real enquanto você faz alterações no código. Use a opção --coverageThreshold do Jest para definir limites mínimos de cobertura de código. Use a opção --maxWorkers do Jest para executar testes em paralelo em vários processos. Use a biblioteca de teste supertest para testar APIs Node.js. Conclusão Em resumo, o Next.js é uma ferramenta essencial para desenvolver aplicativos React mais sofisticados, pois oferece recursos avançados como SSR e SSG. Com sua estrutura otimizada para o desenvolvimento de aplicativos escaláveis, o Next.js torna a construção de aplicativos web ainda mais fácil e produtiva. Se você está procurando uma maneira eficiente de criar aplicativos React poderosos, o Next.js é uma ótima escolha. Visite a documentação oficial do Nextjs para se aprofundar ainda mais no framework.
Gabriel Dürr M.
-
Guia ReactJS 18 para iniciantes
Reactjs
Web development
Front-end
SPA (Single Page Applications)
React JS é uma biblioteca JavaScript popular que permite a criação de interfaces de usuário interativas e dinâmicas. Ele é usado por milhares de desenvolvedores em todo o mundo para construir aplicativos web escaláveis e eficientes. Se você é um iniciante em React JS 18, este guia é para você. Introdução ao React JS React JS é uma biblioteca JavaScript para construir interfaces de usuário. Ele foi desenvolvido pelo Facebook e é mantido por uma comunidade ativa de desenvolvedores. O React JS é baseado em componentes, que são blocos de construção reutilizáveis que podem ser usados para construir interfaces de usuário. O React JS é uma das bibliotecas JavaScript mais populares e é usada por empresas como Netflix, Airbnb, Instagram, Uber e muitas outras. Ele é conhecido por sua eficiência e escalabilidade, o que o torna uma escolha popular para aplicativos web de grande escala. Configuração do ambiente Antes de começar a trabalhar com React JS, você precisa configurar o ambiente de desenvolvimento. Isso envolve a instalação de Node.js e do React CLI. O Node.js é uma plataforma para executar JavaScript fora do navegador, enquanto o React CLI é uma ferramenta de linha de comando para criar e gerenciar projetos React. Criando um projeto React OBS: é necessário instalar o Node.js, vá para o site oficial e baixe a versão mais recente. Para criar um novo projeto React, digite o seguinte comando no terminal: npm create vite@latest NOME DO APP --template react Componentes em React JS Os componentes são a base da construção de interfaces em React JS. Eles são como pequenos blocos de construção que podem ser combinados para criar interfaces mais complexas. Cada componente tem seu próprio estado e propriedades, que podem ser atualizados para refletir as mudanças na interface. Para criar um componente em React JS, você pode usar uma função com o paradigma funcional. A função recebe as propriedades como argumentos e retorna o que será renderizado na interface. type myComponentProps = { title: string; description: string; }; export const MyComponent = ({ title, description }: myComponentProps) => { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> ); }; Estado no ReactJS O gerenciamento de estado é uma parte importante do desenvolvimento de aplicativos em React JS. O estado é um objeto que representa o estado atual da interface. Ele pode ser atualizado para refletir as mudanças na interface. React JS tem uma abordagem única para gerenciamento de estado. Em vez de modificar o estado diretamente, você deve usar o método useState(). O useState() é usado para atualizar o estado e notificar o React JS para re-renderizar a interface. import { useState } from "react"; type myComponentProps = { title: string; description: string; }; export const MyComponent = ({ title, description }: myComponentProps) => { const [count, setCount] = useState(0); function handleClick() { setCount(prevState => prevState + 1); } return ( <div> <h1>{title}</h1> <p>{description}</p> <button onClick={handleClick}>Click Here</button> </div> ); }; Gerenciamento de estados com Context API O gerenciamento de estados é um aspecto fundamental no desenvolvimento de aplicações ReactJS. A ContextAPI é uma ferramenta poderosa que oferece uma maneira eficiente de compartilhar estados entre componentes sem a necessidade de passar props manualmente. Para utilizar a ContextAPI, é necessário criar um Contexto, que armazena o estado e fornece métodos para atualizá-lo. Em seguida, deve-se envolver os componentes que precisam acessar esse estado com o provedor do contexto. Veja o exemplo: import { createContext, useState } from 'react'; export const MyContext = createContext({}); const MyProvider = ({ children }) => { const [myState, setMyState] = useState("gbdx"); return ( <MyContext.Provider value={{ myState, setMyState }}> {children} </MyContext.Provider> ); }; export default MyProvider; Este é um exemplo básico de como criar um contexto com o Context API do React. O MyProvider é o componente que irá envolver os componentes que terão acesso ao contexto. Ele define um estado inicial e disponibiliza através do MyContext.Provider. Para utilizar o valor do contexto em um componente, basta importar o MyContext e utilizar o useContext, como no exemplo abaixo: import { MyContext } from './MyProvider'; import React, { useContext } from 'react'; const MyComponent = () => { const { myState, setMyState } = useContext(MyContext); return ( <div> <p>{myState}</p> <button onClick={() => setMyState('new value')}> CLick to Update </button> </div> ); }; export default MyComponent; Ao fazer isso, esses componentes podem acessar o estado e atualizá-lo quando necessário. Além disso, a ContextAPI permite que utilizar com base no escopo/necessidade de acesso as propriedades do contexto na nossa aplicação. Podemos utilizar o provider do Context API no _app.js, dessa forma o contexto será fornecido para todos os componentes da sua aplicação que são renderizados por ele. Isso pode ser útil se você quiser compartilhar o mesmo contexto entre vários componentes ou páginas. Por exemplo, se você tiver um tema que gostaria que fosse aplicado em toda a sua aplicação, você pode definir o provedor do Context API no _app.js para fornecer o tema para todos os componentes. Por outro lado, se você definir o provedor do Context API em um componente específico, ele será fornecido apenas para esse componente e seus filhos. Isso é útil se você tiver um componente que precise de um contexto específico e que não seja relevante para o restante da aplicação. import { MyProvider } from './hooks/MyProvider'; function MyApp({ Component, pageProps }) { return ( <MyProvider> <Component {...pageProps} /> </MyProvider> ); } export default MyApp; No entanto, é importante lembrar que o uso excessivo da ContextAPI pode tornar a aplicação mais complexa e dificultar a manutenção do código. Por isso, é essencial avaliar cuidadosamente a necessidade de utilizar essa ferramenta em cada caso. Práticas recomendadas Aqui estão algumas práticas recomendadas para trabalhar com React JS: Separação de preocupações Separe o código em componentes menores e mais reutilizáveis. Cada componente deve ter apenas uma responsabilidade. Isso torna o código mais fácil de entender e manter. Gerenciamento de dependências Use o gerenciador de pacotes npm para gerenciar as dependências do seu projeto. Isso torna mais fácil instalar e atualizar as dependências do seu projeto. Testes Escreva testes para garantir que seu código esteja funcionando corretamente. Use ferramentas como Jest e Enzyme para testar componentes React. Isso ajuda a garantir que seu código esteja funcionando corretamente e ajuda a reduzir bugs e problemas de regressão. Conclusão React JS é uma biblioteca poderosa para construir interfaces de usuário. Com este guia, você deve ter uma compreensão básica para criar aplicativos web incríveis. E caso você queira se aprofundar, foi criado recentemente uma nova documentação oficial do React JS incrível!
Gabriel Dürr M.
-
Next.js: O Framework React do Futuro
Nextjs
React.js
Framework
SSG
SSR
getStaticPaths
API-Routes
CSS Modules
Next.js atualmente é considerado um dos frameworks mais populares do mercado. Graças a sua rapidez e robustez de recursos, o framework também é conhecido por sua versatilidade e flexibilidade, muito poderoso e viável para criação de sites de e-commerce, landing pages, sites de marketing, websites estáticos e com foco em SEO – da criação à garantia de escalabilidade. O Next.js oferece recursos para criação de APIs dentro do próprio projeto, cache, otimização de imagens, etc. Configuração inicial: Crie um projeto Next.js: npx create-next-app@latest Com TypeScript adicione a flag --ts npx create-next-app@latest --ts OBS: Ainda há a opção de pode usar um gerenciador de pacotes (NPM, Yearn, PNPM ...): Fluxo de desenvolvimento: A criação de páginas acontece de forma bem simples, todos arquivos dentro da pasta pages (com exceção de arquivos de config), são transformado em páginas/rotas. E todos arquivos dentro da pasta API são transformados em rotas APIs. Estilização com CSS Modules: Além da estilização Global, contamos com recurso chamado CSS modules que nos permite criar estilizações a nível de component, ou seja, o estilo é aplicado somente no escopo do component, sem quer que se preocupar com conflitos de nome de classes na nossa aplicação. É uma grande vantagem adicionar um pré-processador como SASS para trabalhar em conjunto com css modules e criarmos estilos em cascata e mais complexos... Primeiro devemos criar uma pasta que irá conter o index do component, e criar arquivo de estilização no formato nome do arquivo + extensão module.css, ficando dessa forma por ex.: input.module.css Por convenção e organização utilizamos o mesmo nome do component, adicionando apenas a extensão module.css Criamos as estilizações, tendo cada estilização com a sintaxe de classe: .bg { display: flex; justify-content: center; margin: 5% auto; width: 600px; height: 300px; color: #fff; background-color: #000; } Importamos o arquivo de estilização no formato de export default, uma convenção é utilizar o nome styles, e utilizamos a estilização do component através da propriedade className do React, acessando a prop da estilização criada no arquivo module.css. import styles from "./box-container.module.css"; type BoxContainerProps = { children?: ReactNode; }; export const BoxContainer = ({ children }: BoxContainerProps) => { return <div className={styles.bg}>{children}</div>; }; Resultado final: Principais funcionalidades do Next.js: Renderização no lado do Servidor (SSR). import { GetServerSideProps } from "next"; export const getServerSideProps: GetServerSideProps = async () => { const fetchUserApi = { name: "Gabriel", alias: "gbdx", age: 23, }; return { props: { fetchUserApi, }, }; }; Ao utilizar a função SSR, ela será executada a cada requisição feita no client pelo usuário, ou seja, sempre que a página for aberta/atualizada, o servidor do next.js irá buscar pelos dados de uma API por ex., e fornecer esses novos dados para aplicação. Devemos utilizar essa função em casos que exista uma real necessidade, como por ex.: bloqueio de conteúdos que só podem ser visualizados com acesso especial. Para dados que não seja necessário que os dados sejam atualizados a cada requisição, podemos usufruir da geração de páginas estáticas e assim ter ganhos incomparáveis em relação ao carregamento das páginas. Geração de páginas estáticas (SSG). import { GetStaticProps } from "next"; export const getStaticProps: GetStaticProps = async ({ params }) => { const res = await fetch(`https://site-deployed/page/${params.id}`); const data = await res.json(); return { props: { data, }, }; }; Essa funcionalidade com toda certeza é a cereja do bolo do next.js, com ela conseguimos gerar páginas estáticas pré-renderizadas no momento de build, e assim iram ser renderizadas pelo client sem que o usuário espere o carregamento 🤩. Porém se houver atualizações dos dados, o conteúdo so é refletido na página fazendo um novo build. Geração de páginas estáticas de forma incremental (ISG). import { GetStaticProps } from "next"; export const getStaticProps: GetStaticProps = async ({ params }) => { const res = await fetch(`https://site-deployed/page/${params.id}`); const data = await res.json(); const thirtySeconds = 30 * 1000; return { props: { data, }, revalidate: thirtySeconds, }; }; Podemos gerar páginas estáticas, com conteúdo sendo atualizado de forma incremental a cada período de tempo. Ou seja, irá atualizar automaticamente sem precisar fazer um novo build para que os novos dados sejam refletidos no página. Para isso utilizamos a prop revalidate definindo o tempo em segundos, e o next.js fica responsável de atualizar o conteúdo sempre que atingir a contagem do tempo definido Utilizando páginas estáticas dinâmicas com: getStaticPaths + Static Site Generation (SSG) import { GetStaticPaths } from "next"; export const getStaticPaths: GetStaticPaths = async () => { const res = await fetch("https://site-deployed/page"); const data = await res.json(); const paths = data.map(post => ({ params: { id: post.id.toString() }, })); return { paths, fallback: false, }; }; Quando precisamos gerar páginas estáticas que são acessadas de forma dinâmica através de parâmetros da url, precisamos informar para o Next.js todas as rotas existentes da aplicação, para quando realizarmos o build ele criar a rota para todas páginas. Para resolver esse problema, utilizamos a função getStaticPaths que será responsável por gerar todas as rotas. Essa função deve retornar um objeto com uma propriedade chamada params, e essa propriedade contém uma matriz/lista de objetos. Dentro de cada objeto fornecemos o nome da rota para a propriedade que é o mesmo nome que colocamos no arquivo de rota dinâmica, como nesse ex.: [uid] , que poderia ser chamado de [slug], etc. Podemos recuperar o valor digitado no parâmetro da url, na função do getStaticProps e utilizarmos um filtro no nosso fetch que irá buscar e gerar todas páginas estáticas para o uuid/slug do getStaticPaths. Assim teremos todas páginas com todas rotas definidas de forma estáticas, e essa página será exibida dinamicamente conforme sua rota. import { GetStaticProps } from "next"; export const getStaticProps: GetStaticProps = async ({ params }) => { const queryApiWithParamsId = params.id; const res = await fetch(`https://site-deployed/page/${queryApiWithParamsId}`); const data = await res.json(); return { props: { data, }, }; }; Conclusão Em resumo, o Next.js é uma ferramenta essencial para desenvolver aplicativos React mais sofisticados, pois oferece recursos avançados como SSR e SSG. Com sua estrutura otimizada para o desenvolvimento de aplicativos escaláveis, o Next.js torna a construção de aplicativos web ainda mais fácil e produtiva. Se você está procurando uma maneira eficiente de criar aplicativos React poderosos, visite a documentação oficial do NEXT.Js e evolua com o framework.
Gabriel Dürr M.
-
