Perguntas de entrevista frontend júnior: React e ferramentas

Introdução

Se você já consegue explicar os fundamentos de HTML, CSS e JavaScript, a próxima camada em uma entrevista frontend júnior costuma envolver React, ferramentas do dia a dia, performance, depuração, acessibilidade e testes básicos. Este guia reúne 21 perguntas com pontos de resposta para praticar em voz alta e adaptar aos seus próprios projetos.

Use como a parte 2 da série: primeiro confirme os fundamentos e depois use estas perguntas para mostrar como você constrói, depura, mede e mantém uma aplicação frontend. Para a base, leia a Parte 1: Fundamentos de HTML, CSS e JavaScript.

React & Frameworks (8 Perguntas)

33. O que é JSX e por que o usamos no React?

Resposta: JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript que se parece com HTML e é usada para descrever a estrutura da UI no React.

Exemplo:

const element = <h1 className="title">Olá, {name}!</h1>;

// É compilado para:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Olá, ',
  name,
  '!'
);

Benefícios:

• Mais legível e intuitivo do que React.createElement()
• Parece HTML, mas com todo o poder do JavaScript
• Suporta expressões dentro de chaves {}
• Type-safe ao usar TypeScript
• Sintaxe familiar para desenvolvedores

Principais diferenças do HTML:

• Use className em vez de class
• Use htmlFor em vez de for
• Todos os atributos são camelCase (onClick, onChange)
• Deve fechar todas as tags (incluindo <img />, <br />)

Raridade: Comum
Dificuldade: Fácil

34. Explique a diferença entre props e state no React

Resposta:

Props (Propriedades):

• Dados passados DO componente pai PARA o componente filho
• Somente leitura (imutável da perspectiva do filho)
• Usado para configuração do componente
• As mudanças vêm da renderização do pai

// Pai
function Parent() {
  return <Child name="Alice" age={25} />;
}

// Filho
function Child({ name, age }) {
  return <p>{name} tem {age} anos</p>;
  // Não pode modificar name ou age
}

State (Estado):

• Dados gerenciados DENTRO de um componente
• Mutável (pode ser alterado com a função setter)
• Mudanças disparam renderizações novamente
• Privado ao componente

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Contagem: {count}
    </button>
  );
}

Principal diferença: Props fluem para baixo (pai para filho), state é local para o componente.

Raridade: Comum
Dificuldade: Fácil

35. O que é o hook useState e como você o usa?

Resposta: useState é um Hook do React que adiciona gerenciamento de estado a componentes funcionais.

Sintaxe:

const [stateVariable, setStateFunction] = useState(initialValue);

Exemplos:

// Contador simples
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <button onClick={() => setCount(0)}>Resetar</button>
    </div>
  );
}

// Estado de objeto
function Form() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  );
}

// Inicialização preguiçosa (computação custosa)
const [data, setData] = useState(() => {
  return expensiveComputation();
});

Pontos chave:

• As atualizações de estado disparam novas renderizações
• As atualizações de estado são assíncronas
• Use atualizações funcionais para o estado com base no estado anterior: setCount(prev => prev + 1)

Raridade: Comum
Dificuldade: Fácil-Médio

36. O que o hook useEffect faz? Explique o array de dependências.

Resposta: useEffect executa efeitos colaterais após a renderização (busca de dados, assinaturas, manipulação do DOM).

Sintaxe:

useEffect(() => {
  // Código do efeito colateral aqui
  
  return () => {
    // Limpeza (opcional)
  };
}, [dependencies]);

Comportamento do array de dependências:

// 1. Sem array de dependências - executa após CADA renderização
useEffect(() => {
  console.log('Executa toda renderização');
});

// 2. Array vazio [] - executa UMA VEZ na montagem
useEffect(() => {
  console.log('Executa apenas na montagem');
  fetchData();
}, []);

// 3. Com dependências - executa quando as dependências mudam
useEffect(() => {
  console.log('Executa quando a contagem muda');
  document.title = `Contagem: ${count}`;
}, [count]);

Casos de uso comuns:

// Buscando dados
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// Listeners de eventos (com limpeza)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

Raridade: Comum
Dificuldade: Médio

37. Como você renderiza uma lista de itens no React? Por que precisamos de chaves (keys)?

Resposta:

Renderizando listas:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Por que as chaves são importantes: As chaves ajudam o React a identificar quais itens foram alterados, adicionados ou removidos. Elas permitem atualizações eficientes por:

• Minimizar a manipulação do DOM
• Preservar o estado do componente
• Manter a identidade correta do elemento
• Otimizar o algoritmo de reconciliação

Diretrizes para chaves:

// BOM - IDs únicos e estáveis
items.map(item => <Item key={item.id} {...item} />)

// RUIM - Índice do array (instável quando a lista muda)
items.map((item, index) => <Item key={index} {...item} />)

// RUIM - Chaves não exclusivas causam bugs
items.map(item => <Item key={item.category} {...item} />)

Quando o índice é aceitável: Listas estáticas que nunca reordenam ou mudam.

Raridade: Comum
Dificuldade: Fácil-Médio

38. O que é o Virtual DOM e por que o React o usa?

Resposta: O Virtual DOM é uma representação JavaScript leve do DOM real que o React mantém na memória.

Como funciona:

1. Renderizar: O React cria a árvore Virtual DOM quando o estado muda
2. Diff: O React compara o novo Virtual DOM com a versão anterior (reconciliação)
3. Atualizar: O React calcula as mudanças mínimas necessárias
4. Patch: O React atualiza apenas as partes alteradas do DOM real

Por que é benéfico:

• Performance: A manipulação direta do DOM é lenta; o React agrupa e minimiza as atualizações
• Eficiência: Atualiza apenas os elementos alterados, não toda a árvore
• Experiência do desenvolvedor: Escreva código declarativo, o React lida com atualizações eficientes
• Abstração: O mesmo código pode ter como alvo diferentes plataformas (React Native, VR)

Exemplo:

// Você escreve:
<div>{count}</div>

// Quando a contagem muda de 0 para 1:
// O React atualiza apenas o nó de texto, não todo o div

Nota: O React moderno (arquitetura Fiber) não diferencia literalmente dois Virtual DOMs, mas usa um conceito semelhante com nós Fiber.

Raridade: Comum
Dificuldade: Médio

39. Como você lida com formulários no React?

Resposta:

Componentes controlados (recomendado): Os valores dos elementos do formulário são controlados pelo estado do React.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();  // Evita recarregar a página
    console.log('Enviado:', formData);
    // Chamada de API aqui
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Componentes não controlados (menos comum): Use refs para acessar os valores do DOM diretamente.

function UncontrolledForm() {
  const emailRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  );
}

Melhor prática: Use componentes controlados na maioria dos casos.

Raridade: Comum
Dificuldade: Médio

40. Qual é a diferença entre componentes funcionais e de classe?

Resposta:

Componentes Funcionais (Moderno, preferido):

function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Efeitos colaterais
  }, []);
  
  return <h1>Olá, {name}!</h1>;
}

Componentes de Classe (Legado):

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    // Efeitos colaterais
  }
  
  render() {
    return <h1>Olá, {this.props.name}!</h1>;
  }
}

Principais diferenças:

• Sintaxe: Funções vs classes
• Estado: Hooks (useState) vs this.state
• Ciclo de vida: Hooks (useEffect) vs métodos de ciclo de vida
• Palavra-chave this: Não é necessária em componentes funcionais
• Boilerplate: Menos código em componentes funcionais
• Performance: Ligeiramente melhor com componentes funcionais

Padrão moderno: Componentes funcionais com Hooks são agora a abordagem recomendada (desde o React 16.8). Os componentes de classe ainda funcionam, mas são considerados legados.

Raridade: Comum
Dificuldade: Fácil-Médio

Ferramentas de Build & Controle de Versão (5 Perguntas)

41. O que é npm e para que serve o package.json?

Resposta: npm (Node Package Manager) é o gerenciador de pacotes padrão para JavaScript, usado para instalar, gerenciar e compartilhar pacotes de código.

package.json é o arquivo manifesto que contém:

• Metadados: Nome do projeto, versão, descrição, autor
• Dependências: Pacotes necessários para produção (dependencies)
• DevDependencies: Pacotes necessários apenas para desenvolvimento (devDependencies)
• Scripts: Comandos para tarefas comuns (start, build, test)

Exemplo de package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Comandos comuns:

• npm install - Instala todas as dependências
• npm install nome-do-pacote - Instala um pacote específico
• npm install --save-dev nome-do-pacote - Instala como dependência de desenvolvimento
• npm run nome-do-script - Executa um script npm
• npm update - Atualiza pacotes

Raridade: Comum
Dificuldade: Fácil

42. O que é Git e por que as equipes o usam?

Resposta: Git é um sistema de controle de versão distribuído que rastreia as mudanças no código ao longo do tempo.

Por que as equipes usam o Git:

• Colaboração: Vários desenvolvedores trabalham na mesma base de código sem conflitos
• Histórico: Registro completo de todas as mudanças (quem, o quê, quando, por quê)
• Branching: Trabalhe em recursos independentemente, sem afetar o código principal
• Backup: Código armazenado em vários locais (local + remoto)
• Rollback: Reverta facilmente para versões de trabalho anteriores
• Revisão de código: Revise as alterações antes de mesclar (pull requests)
• Experimentação: Experimente novas ideias em branches sem risco

Conceitos básicos:

• Repositório (repo): Pasta do projeto rastreada pelo Git
• Commit: Snapshot de mudanças com mensagem
• Branch: Linha de desenvolvimento independente
• Merge: Combine as mudanças de diferentes branches
• Remoto: Repositório hospedado online (GitHub, GitLab)

Padrão da indústria: Mais de 93% dos desenvolvedores usam o Git em todo o mundo.

Raridade: Comum
Dificuldade: Fácil

43. Explique os comandos e o fluxo de trabalho comuns do Git

Resposta:

Fluxo de trabalho básico:

# Clona o repositório
git clone https://github.com/user/repo.git

# Verifica o status
git status

# Cria uma nova branch
git checkout -b nome-do-recurso
# ou sintaxe moderna:
git switch -c nome-do-recurso

# Faça alterações, então stage
git add arquivo.js
git add .  # Stage todas as alterações

# Commit com mensagem
git commit -m "Adiciona recurso de login"

# Envia para o remoto
git push origin nome-do-recurso

# Puxa as últimas alterações
git pull origin main

# Mescla a branch
git checkout main
git merge nome-do-recurso

# Visualiza o histórico
git log

Comandos essenciais que os juniores devem conhecer:

• clone - Copia o repositório remoto
• add - Stage as alterações
• commit - Salva o snapshot com a mensagem
• push - Envia para o remoto
• pull - Baixa + mescla as alterações remotas
• branch - Lista/cria branches
• checkout/switch - Troca de branches
• status - Vê o estado atual
• log - Visualiza o histórico de commits

Raridade: Comum
Dificuldade: Fácil-Médio

44. O que é um conflito de merge e como você resolveria um?

Resposta: Um conflito de merge ocorre quando o Git não consegue mesclar automaticamente as alterações porque existem modificações concorrentes nas mesmas linhas de código.

Cenário comum:

# O desenvolvedor A altera a linha 5
# O desenvolvedor B também altera a linha 5
# Ao mesclar, o Git não sabe qual manter

Marcadores de conflito:

<<<<<<< HEAD
const greeting = "Olá";
=======
const greeting = "Oi";
>>>>>>> nome-da-branch-de-recurso

Etapas de resolução:

1. Identifique os conflitos: O Git marca os arquivos com conflitos
2. Abra os arquivos em conflito: Procure por marcadores de conflito
3. Decida o que manter: Revise ambas as alterações
4. Edite o código: Remova os marcadores, mantenha o código desejado
5. Teste: Garanta que o código funcione corretamente
6. Stage os arquivos resolvidos: git add arquivo.js
7. Conclua o merge: git commit

Melhores práticas:

• Comunique-se com a equipe
• Puxe com frequência para minimizar os conflitos
• Mantenha os commits pequenos e focados
• Teste completamente após a resolução

Raridade: Comum
Dificuldade: Médio

45. O que o Webpack faz? O que é Vite?

Resposta:

Webpack: Um bundler de módulos que recebe JavaScript, CSS, imagens e outros ativos, os processa e os agrupa em arquivos otimizados para o navegador.

O que ele faz:

• Agrupa vários arquivos em menos arquivos
• Transforma o código (Babel para JSX/ES6, Sass para CSS)
• Otimiza para produção (minificação, tree shaking)
• Lida com dependências
• Code splitting para performance

Conceito básico:

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (tudo combinado e otimizado)

Vite: Ferramenta de build moderna que é significativamente mais rápida do que os bundlers tradicionais como o Webpack.

Por que o Vite é mais rápido:

• Usa módulos ES nativos durante o desenvolvimento (nenhum bundling necessário)
• Hot Module Replacement (HMR) é instantâneo
• Apenas bundles para produção
• Melhor experiência do desenvolvedor

Quando usar:

• Vite: Novos projetos, frameworks modernos (React, Vue)
• Webpack: Projetos existentes, precisam de configuração complexa

Raridade: Comum
Dificuldade: Fácil-Médio

Performance Web & Otimização (3 Perguntas)

46. Como você otimizaria o desempenho de carregamento de um site?

Resposta:

Otimização de imagem:

• Comprima as imagens (JPG para fotos, PNG para gráficos, WebP para ambos)
• Use tamanhos apropriados (não carregue uma imagem de 4000px para uma exibição de 300px)
• Carregue as imagens abaixo da dobra de forma lazy
• Use srcset para imagens responsivas

Otimização de código:

• Minifique JavaScript, CSS, HTML (remova espaços em branco, comentários)
• Bundle e comprima os arquivos (gzip ou Brotli)
• Remova CSS/JS não utilizados (tree shaking)
• Code splitting (carregue apenas o código necessário por página)

Caching:

• Caching do navegador com cabeçalhos de cache adequados
• Use CDN para ativos estáticos
• Service workers para capacidades offline

Estratégias de carregamento:

• CSS crítico inline em <head>
• Adie JavaScript não crítico
• Pré-carregue recursos importantes
• Reduza as solicitações HTTP

Métricas de performance:

• Meça com Lighthouse, PageSpeed Insights
• Alvo: FCP < 1.8s, LCP < 2.5s, CLS < 0.1

Raridade: Comum
Dificuldade: Médio

47. Quais ferramentas você usaria para medir o desempenho do site?

Resposta:

Browser DevTools:

• Guia Rede do Chrome DevTools: Analise o tempo das solicitações, tamanhos dos arquivos, ordem de carregamento
• Guia Performance/Lighthouse: Gere relatórios de desempenho com pontuações
• Guia Coverage: Encontre JavaScript/CSS não utilizados
• Console: Meça com console.time() e Performance API

Ferramentas online:

• Google PageSpeed Insights: Obtenha pontuações de desempenho e recomendações
• WebPageTest: Gráficos de cascata detalhados, vários locais
• GTmetrix: Análise de desempenho com notas

Métricas para monitorar:

• First Contentful Paint (FCP): Quando o primeiro conteúdo aparece
• Largest Contentful Paint (LCP): Quando o conteúdo principal carrega
• Time to Interactive (TTI): Quando a página se torna interativa
• Cumulative Layout Shift (CLS): Estabilidade visual
• Total Blocking Time (TBT): Tempo de bloqueio da thread principal

Para juniores: O conhecimento básico do Chrome DevTools e do Lighthouse é suficiente. Habilidades de profiling profundo não são esperadas.

Raridade: Comum
Dificuldade: Fácil-Médio

48. O que é lazy loading e quando você o usaria?

Resposta: Lazy loading adia o carregamento de recursos não críticos até que sejam necessários, normalmente quando estão prestes a entrar no viewport.

Casos de uso comuns:

Imagens:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descrição">

Lazy loading nativo (navegadores modernos):

<img src="image.jpg" loading="lazy" alt="Descrição">

JavaScript/React:

// Component lazy loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Carregando...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Benefícios:

• Carregamento inicial da página mais rápido
• Uso reduzido de largura de banda
• Melhor desempenho em conexões lentas
• Experiência do usuário aprimorada (o conteúdo aparece mais rápido)

Quando usar:

• Imagens abaixo da dobra
• Componentes pesados não visíveis imediatamente
• Conteúdo em abas/acordeões
• Implementações de rolagem infinita

Raridade: Incomum
Dificuldade: Médio

Depuração & Ferramentas de Desenvolvedor (2 Perguntas)

49. Como você depura um erro de JavaScript no navegador?

Resposta:

Processo de depuração passo a passo:

1. Verifique o Console:

console.log(variável);      // Inspeciona valores
console.error('Erro:', erro);  // Registra erros
console.table(arrayDeObjetos);   // Visualiza dados em tabela
console.warn('Aviso');    // Destaca avisos

2. Use Breakpoints:

• Abra o painel Fontes/Debugger do DevTools
• Clique no número da linha para definir o breakpoint
• A execução do código é pausada no breakpoint
• Inspecione as variáveis no painel Escopo
• Avance pelo código (Step Over, Step Into, Step Out)

3. Examine o Stack Trace:

• As mensagens de erro mostram os nomes dos arquivos e os números das linhas
• Siga a pilha de chamadas para encontrar a origem do erro
• Verifique os erros de rede na guia Rede

4. Depure problemas do DOM:

• Inspecione os elementos no painel Elementos
• Verifique os estilos computados
• Use a forçagem do estado :hover
• Verifique os listeners de eventos anexados

5. Verifique as Solicitações de Rede:

• A guia Rede mostra as chamadas de API com falha
• Examine os cabeçalhos de solicitação/resposta
• Verifique os códigos de status (404, 500, etc.)

Técnicas comuns de depuração:

• Adicione a declaração debugger; para pausar a execução
• Use breakpoints condicionais
• Observe as expressões
• Coloque código de terceiros em black box

Raridade: Comum
Dificuldade: Fácil-Médio

50. Quais são os principais painéis no Chrome DevTools e para que você os usa?

Resposta:

Painéis essenciais:

1. Console:

• Visualize erros e logs do JavaScript
• Execute comandos JavaScript
• Teste expressões interativamente
• Teste de API

2. Elements (Inspector):

• Inspecione e modifique a estrutura HTML
• Edite CSS em tempo real
• Depure problemas de layout
• Visualize estilos computados, modelo de caixa
• Teste designs responsivos

3. Sources (Debugger):

• Visualize os arquivos de origem
• Defina breakpoints
• Avance pela execução do código
• Edite e salve as alterações (workspaces)
• Visualize a pilha de chamadas

4. Network:

• Monitore as solicitações/respostas HTTP
• Verifique os tempos de carregamento e os tamanhos dos arquivos
• Depure as chamadas de API
• Filtre por tipo (JS, CSS, XHR, imagens)
• Limite a velocidade da rede

5. Performance/Lighthouse:

• Analise o desempenho em tempo de execução
• Gere auditorias de desempenho
• Identifique gargalos
• Verifique as Core Web Vitals

6. Application:

• Inspecione o armazenamento local, o armazenamento de sessão
• Visualize e limpe os cookies
• Verifique os service workers
• Gerencie o cache

Para juniores: Forte familiaridade com Console, Elements, Sources e Network é esperada. O profiling de performance é um plus.

Raridade: Comum
Dificuldade: Fácil

Acessibilidade & Melhores Práticas (2 Perguntas)

51. O que é acessibilidade web e por que é importante?

Resposta: Acessibilidade web significa projetar e desenvolver sites que possam ser usados por todos, incluindo pessoas com deficiência (visual, auditiva, motora, cognitiva).

Por que é importante:

1. Design inclusivo: 15% da população mundial tem alguma forma de deficiência 2. Requisitos legais: ADA (Americans with Disabilities Act), Seção 508, conformidade com WCAG 3. Melhor UX para todos: As legendas ajudam em ambientes ruidosos, a navegação por teclado ajuda os usuários avançados 4. Benefícios de SEO: HTML semântico e estrutura adequada melhoram a classificação na pesquisa 5. Público maior: Não exclua potenciais usuários/clientes 6. Responsabilidade ética: O acesso igual é um direito humano

Deficiências comuns a serem consideradas:

• Visual: Cegueira, baixa visão, daltonismo
• Auditiva: Surdez, perda auditiva
• Motora: Mobilidade limitada, tremores, paralisia
• Cognitiva: Dificuldades de aprendizagem, problemas de memória

Caso de negócios: Sites acessíveis alcançam mais usuários, têm uma classificação melhor na pesquisa, evitam processos judiciais, demonstram responsabilidade corporativa.

Raridade: Comum
Dificuldade: Fácil-Médio

52. Quais são algumas maneiras básicas de tornar um site mais acessível?

Resposta:

Estrutura HTML:

• Use elementos semânticos (<header>, <nav>, <main>, <article>, <footer>)
• Hierarquia de heading adequada (H1 → H2 → H3, sem pular)
• Rotule as entradas do formulário corretamente

<label for="email">Email:</label>
<input id="email" type="email" name="email" />

Imagens:

• Sempre inclua texto alt descritivo
• Use alt vazio para imagens decorativas: alt=""

Navegação por teclado:

• Todos os elementos interativos devem ser acessíveis pelo teclado
• Ordem de tabulação lógica
• Indicadores de foco visíveis
• Não remova o contorno :focus

Cor e contraste:

• Contraste de cor suficiente (4.5:1 para texto normal, 3:1 para texto grande)
• Não confie apenas na cor para transmitir informações
• Teste com simuladores de daltonismo

Atributos ARIA (quando necessário):

<button aria-label="Fechar diálogo">×</button>
<div role="alert" aria-live="polite">Alterações salvas</div>
<nav aria-label="Navegação principal">...</nav>

Testando:

• Use leitores de tela (VoiceOver, NVDA, JAWS)
• Navegação apenas com teclado
• Ferramentas de acessibilidade do navegador (Lighthouse, axe)

Raridade: Comum
Dificuldade: Médio

Consciência de Testes (1 Pergunta)

53. O que é teste unitário e por que é importante?

Resposta: O teste unitário envolve o teste de funções ou componentes individuais isoladamente para verificar se funcionam corretamente.

O que ele testa:

• A função retorna a saída esperada para a entrada fornecida?
• O componente renderiza corretamente com as props fornecidas?
• Os casos extremos funcionam corretamente?

Exemplo (Jest):

// Função para testar
function add(a, b) {
  return a + b;
}

// Teste unitário
test('soma 1 + 2 para igualar 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('lida com números negativos', () => {
  expect(add(-1, -2)).toBe(-3);
});

Por que é importante:

• Detecta bugs mais cedo: Encontre problemas antes da produção
• Confiança nas mudanças: Refatore sem medo
• Documentação: Os testes mostram como o código deve ser usado
• Depuração mais rápida: Identifique o local exato da falha
• Melhor design: O código testável geralmente é um código mais limpo

Pirâmide de testes:

• Muitos testes unitários (rápidos, baratos)
• Menos testes de integração (testam os componentes juntos)
• Poucos testes de ponta a ponta (fluxos completos do usuário, lentos)

Para juniores: Entender por que o teste é importante e os conceitos básicos é suficiente. Escrever suítes de teste abrangentes não é normalmente esperado para cargos de nível inicial, mas a vontade de aprender testes é importante.

Frameworks comuns: Jest, React Testing Library, Mocha, Jasmine

Raridade: Comum
Dificuldade: Fácil-Médio

Total: 21 perguntas

Estas perguntas cobrem os temas práticos de React e ferramentas que costumam aparecer depois dos fundamentos em entrevistas frontend júnior. Combine com a Parte 1: Fundamentos de HTML, CSS e JavaScript e pratique explicando as respostas com exemplos dos seus próprios projetos.