Cypress ile Angular ve Vite Bileşen Testini Hızlandırın

Angular projelerinizde bileşen testleri için Cypress kullanıyorsanız, Vite entegrasyonuyla performansın önemli ölçüde artığını biliyor muydunuz? Cypress'in sunduğu tarayıcı tabanlı test ortamı, gerçek kullanıcı etkileşimlerini simüle ederken sunduğu hata ayıklama ve otomatik yeniden deneme özellikleriyle öne çıkıyor. Ancak varsayılan Webpack yapılandırmanız yerine Vite'ı tercih ederek soğuk başlangıç sürelerini kısaltabilir ve Hot Module Replacement (HMR) desteğiyle geliştirme deneyiminizi iyileştirebilirsiniz.

Vite Eklentisini Kurun ve Projeyi Hazırlayın

Cypress bileşen testlerini Vite ile çalıştırmak için ilk adım, Angular bileşenlerinin Vite tarafından derlenmesini sağlayan özel bir eklentiyi kurmak. Bu eklenti, @analogjs/vite-plugin-angular olarak adlandırılıyor ve geliştirme bağımlılığı olarak projenize eklemeniz gerekiyor:

npm install @analogjs/vite-plugin-angular --save-dev

Eklenti kurulduktan sonra, projenizin kök dizinindeki cypress.config.ts yapılandırma dosyasını Vite'ı destekleyecek şekilde güncellemeniz gerekiyor. Bu dosya, Cypress'in bileşen testleri için kullanılan yapılandırma ayarlarını içeriyor. Aşağıdaki örnekte, Vite yapılandırma seçeneklerini ve Angular eklentisini nasıl entegre edeceğiniz gösteriliyor:

import { defineConfig } from 'cypress';
import angular from '@analogjs/vite-plugin-angular';

export default defineConfig({
  component: {
    devServer: {
      bundler: 'vite',
      // Cypress'in genel tür tanımlarında `bundler: 'vite'` ve `framework: 'angular'` henüz tam olarak eşleşmediği için bu uyarıyı geçici olarak devre dışı bırakıyoruz.
      // @ts-expect-error
      framework: 'angular',
      viteConfig: {
        plugins: [
          angular({
            tsconfig: 'tsconfig.cypress.json'
          })
        ],
      },
    },
    specPattern: 'src/**/*.cy.ts',
    supportFile: 'cypress/support/component.ts',
    indexHtmlFile: 'cypress/support/component-index.html',
  },
});

Bu yapılandırmada dikkat edilmesi gereken en önemli nokta, bundler seçeneğinin vite olarak ayarlanması ve Angular eklentisinin Vite yapılandırmasına dahil edilmesidir. Böylece, Cypress bileşen testleri sırasında Angular bileşenleri Vite tarafından derlenerek daha hızlı bir geliştirme deneyimi sunulur.

Destek Dosyasını Güncelleyin

Cypress'in bileşen testlerini düzgün şekilde çalıştırması için, cypress/support/component.ts dosyasının da güncellenmesi gerekiyor. Bu dosya, testlerde kullanılacak mount komutunu tanımlar. Eğer projenizde Zone.js kullanılmıyorsa, aşağıdaki yapılandırmayı kullanabilirsiniz:

import '@angular/compiler';
import { mount } from 'cypress/angular-zoneless';

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

Zone.js kullanan projelerdeyse yapılandırma biraz farklılaşıyor. Bu durumda, Zone.js test ortamını da dahil etmeniz ve mount fonksiyonunu zone destekli olarak çağırmalısınız:

import 'zone.js';
import 'zone.js/testing';
import '@angular/compiler';
import { mount } from 'cypress/angular';

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

Bu değişiklikler sayesinde, Cypress testlerinde Angular bileşenleri doğru şekilde monte edilerek testlerin sorunsuz çalışması sağlanır.

TypeScript Yapılandırmasını Güncelleyin

Cypress bileşen testleri sırasında TypeScript derlemesi için kullanılan tsconfig.cypress.json dosyasını da güncellemeniz gerekiyor. Bu dosya, projenizin genel TypeScript yapılandırmasını temel alarak özel ayarlar içeriyor. Aşağıdaki yapılandırma örneği, Cypress testleri için gerekli olan tüm ayarları içeriyor:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/cypress",
    "target": "es2022",
    "types": ["cypress", "node"],
    "noPropertyAccessFromIndexSignature": false
  },
  "include": ["src/**/*.ts", "cypress/**/*.ts"],
  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts"]
}

Bu yapılandırma sayesinde, Cypress testleri sırasında kullanılan TypeScript dosyaları doğru şekilde derlenir ve testlerin çalışması için gerekli olan tüm tür tanımları sağlanır.

Testleri Çalıştırın ve Performans Kazanımlarını Görün

Tüm yapılandırmalar tamamlandıktan sonra, projenizdeki mevcut Cypress test komutlarını kullanmaya devam edebilirsiniz. Örneğin, interaktif test arayüzünü başlatmak için:

npm run cypress:open

Ya da komut satırında testleri çalıştırmak için:

npm run cypress:run

Bu komutlar, artık Vite tarafından desteklenen bir geliştirme sunucusunda çalışıyor olacak. Sonuç olarak, testlerin soğuk başlangıç sürelerinde önemli ölçüde iyileşme göreceksiniz. Ayrıca, HMR desteği sayesinde kod değişiklikleri anında tarayıcıda yansıtılacak ve geliştirme süreci daha akıcı hale gelecektir.

Sonuç: Daha Hızlı ve Verimli Testler için Vite'ı Tercih Edin

Cypress bileşen testlerinizi Webpack yerine Vite ile çalıştırarak birçok avantaj elde edebilirsiniz. Vite'ın sunduğu hızlı soğuk başlangıçlar ve HMR desteği sayesinde, geliştirme süreci daha verimli hale gelir. Ayrıca, Cypress'in sunduğu gerçek tarayıcı çalıştırma, zaman yolculuğu hata ayıklama, otomatik yeniden deneme ve cy.intercept ağı taklit etme gibi özelliklerinden de faydalanmaya devam edersiniz.

Bu değişiklikler, özellikle büyük Angular projelerinde geliştiricilerin deneyimini önemli ölçüde iyileştirecektir. Projenizin gereksinimlerine göre bu yapılandırmayı uyarlayarak, hem geliştirme hem de test süreçlerinde önemli kazanımlar elde edebilirsiniz.