Capítulo 327 de 456

Cypress

Core Idea

Setup de Cypress no Next.js para End-to-End (E2E) e Component Testing, com scripts para rodar em modo interativo e headless (CI).

Key Concepts

  • cypress open: abre a suíte interativa; primeira execução cria cypress.config.js e a pasta cypress.
  • cypress run: execução headless, adequada para CI.
  • cy.mount(): monta um componente React isolado em Component Testing, sem servidor.
  • start-server-and-test: pacote auxiliar para subir o Next.js e rodar Cypress em sequência num único script.
  • Limitação de versão: Cypress < 13.6.3 não suporta TypeScript 5 com moduleResolution: "bundler".

Code Examples

export default defineConfig({
  e2e: { setupNodeEvents(on, config) {} },
})
  • O que demonstra: config mínima de E2E.
describe('Navigation', () => {
  it('should navigate to the about page', () => {
    cy.visit('http://localhost:3000/')
    cy.get('a[href*="about"]').click()
    cy.url().should('include', '/about')
    cy.get('h1').contains('About')
  })
})
  • O que demonstra: teste E2E de navegação entre páginas via link.
export default defineConfig({
  component: {
    devServer: { framework: 'next', bundler: 'webpack' },
  },
})
  • O que demonstra: config para Component Testing integrado ao Next.js.

Anti-patterns

  • Rodar E2E contra next dev: recomendado testar contra o build de produção (next build && next start) para refletir o comportamento real.
  • Testar Server Components async via Component Testing: não suportado; usar E2E nesse caso.
  • Esperar <Image /> funcionar plenamente em Component Testing: features que dependem de servidor podem não funcionar fora de um Next.js server real.

Key Takeaways

  1. cy.visit("/") com baseUrl configurado evita hardcode de localhost:3000 nos testes.
  2. Component Testing não precisa de servidor, mas tem limitações (sem async Server Components, sem <Image> completo).
  3. CI usa cypress run (headless) em vez de cypress open.

Connects To

  • Playwright: alternativa de E2E multi-browser (Chromium/Firefox/WebKit).
  • Jest / Vitest: ferramentas de unit testing complementares ao E2E.
AnteriorTestingPróximoJest