Fale-nos sobre a sua experiência com testes em…

Nos projetos, utilizei vários tipos de testes para garantir a qualidade do frontend:

Testes unitários: Com Jest e React Testing Library para isolar e verificar componentes, funções e módulos individuais. Isso ajuda a detectar erros lógicos rapidamente em partes pequenas e independentes do código.

// Exemplo de teste unitário de um componente Button com Jest e React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renderiza o botão com o texto correto', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Testes de integração: Para verificar a interação entre vários componentes ou módulos. Isso ajuda a garantir que as diferentes partes do sistema funcionem corretamente juntas. Também usei React Testing Library para isso.

// Exemplo de teste de integração de um formulário e botão de envio
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('ao enviar o formulário, chama onSubmit com os dados corretos', () => {
  const mockSubmit = jest.fn();
  render(<Form onSubmit={mockSubmit} />);

  const input = screen.getByLabelText(/Username:/i);
  const submitButton = screen.getByRole('button', { name: /Submit/i });

  fireEvent.change(input, { target: { value: 'testuser' } });
  fireEvent.click(submitButton);

  expect(mockSubmit).toHaveBeenCalledWith({ username: 'testuser' });
});

Testes E2E: Em alguns projetos, usei Cypress ou Playwright para testar cenários de usuário de ponta a ponta em um navegador real. Isso ajuda a verificar se a aplicação como um todo funciona como esperado para o usuário final.

// Exemplo de teste E2E com Cypress
// cypress/integration/todo.spec.js
describe('Aplicação Todo', () => {
  it('deve adicionar um novo item de tarefa', () => {
    cy.visit('/'); // Navegar até a página da aplicação

    cy.get('.new-todo').type('Buy milk{enter}'); // Digitar e pressionar Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Verificar o número de elementos
      .first()
      .should('have.text', 'Buy milk'); // Verificar o texto do primeiro elemento
  });
});

Testes de snapshot: Com Jest, para capturar a estrutura do componente e detectar mudanças não intencionais na marcação (por exemplo, após refatoração).

// Exemplo de teste de snapshot de um componente Card com Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card renderiza corretamente', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Comparar com o snapshot salvo
});

Acredito que os testes sejam uma parte importante do processo de desenvolvimento, pois ajudam a manter a qualidade do código, facilitam a refatoração e reduzem a probabilidade de erros em produção. Pratico escrever testes juntamente com o desenvolvimento de novas funcionalidades ou antes de corrigir bugs (abordagem TDD, quando aplicável).

Fale-nos sobre a sua experiência com testes em projetos.