React, modern web uygulamaları geliştirmede yaygın olarak kullanılan bir JavaScript kütüphanesidir. Bileşen tabanlı mimarisi, kullanıcı arayüzlerini küçük, bağımsız ve tekrar kullanılabilir parçalara bölerek oluşturmayı kolaylaştırır. Storybook ise, React bileşenlerini izole bir ortamda geliştirmek ve test etmek için kullanılan güçlü bir araçtır. Bu makalede, React ve Storybook kullanarak bileşen geliştirme ve test etme sürecini ayrıntılı bir şekilde inceleyeceğiz.
Storybook Kurulumu
Storybook kurulumuna başlamak için, mevcut bir React projesine ihtiyacınız olacak. Eğer yoksa, aşağıdaki komutla yeni bir React projesi oluşturabilirsiniz:
Ardından, Storybook'u projenize ekleyin:
Bu komut, Storybook'un gerekli bağımlılıklarını yükler ve proje dizininizde .storybook adlı bir klasör oluşturur.
Component Geliştirme
Bir bileşen oluşturmak için, src/components dizininde yeni bir dosya açın. Örneğin, Button.js adlı bir dosya oluşturalım:
Bu basit Button bileşeni, bir etiket ve tıklama olayını destekler. Stil dosyasını da ekleyelim (Button.css):
Story Tanımlama
Şimdi, Button bileşeni için Story tanımlayalım. src/stories dizininde Button.stories.js dosyasını oluşturalım:
Bu kod, Button bileşeni için iki farklı durumu (Primary ve Secondary) tanımlar. Her iki durumda da Button bileşenine farklı etiketler ve tıklama olayları atanmıştır.
Storybook'u Çalıştırma
Storybook'u çalıştırmak için aşağıdaki komutu kullanın:
Bu komut, Storybook'unuzu yerel sunucuda başlatır ve tarayıcınızda http://localhost:6006 adresinde açılır. Burada, Button bileşeninizin farklı durumlarını izole bir şekilde görebilir ve test edebilirsiniz.
Component Testleri
React bileşenlerini test etmek için Jest ve React Testing Library gibi araçlar kullanabilirsiniz. Öncelikle bu bağımlılıkları yükleyin:
Button bileşeni için basit bir test dosyası oluşturalım (Button.test.js):
Bu test dosyası, Button bileşeninin etiketini doğru şekilde render edip etmediğini ve tıklama olayının çalışıp çalışmadığını kontrol eder.
Storybook Addons Kullanımı
Storybook, bileşen geliştirme sürecinizi daha da güçlendiren çeşitli eklentiler (addons) sunar. Örneğin, Actions eklentisi ile bileşeninizin olaylarını izleyebilirsiniz. @storybook/addon-actions paketini yükleyin:
Ardından, Button.stories.js dosyasını güncelleyin:
Artık, Button bileşeni tıklandığında Actions panelinde tıklama olaylarını görebilirsiniz.
React ve Storybook kullanarak bileşen geliştirme ve test etme süreci, kullanıcı arayüzlerinizi daha modüler, test edilebilir ve bakım kolaylığı olan hale getirir. Storybook'un sağladığı izole geliştirme ortamı, bileşenlerinizin farklı durumlarını kolayca test etmenizi sağlar. Bu makalede, Storybook kurulumu, bileşen tanımlama, test senaryoları oluşturma ve eklentiler kullanma adımlarını inceledik. Bu bilgilerle, React ve Storybook kullanarak daha sağlam ve güvenilir kullanıcı arayüzleri geliştirebilirsiniz.