Jest Kullanarak Next.js Uygulamalarını Test Etme

Herhangi bir geliştirme sürecinin birincil amacı, üretime hazır uygulamalar oluşturmaktır. Bunu başarmak için, yalnızca işlevsel gereksinimleri karşılayan değil, aynı zamanda zaman içinde kararlı ve güvenilir kalan kod yazmak esastır. Test, geliştirme sırasında yeni güncellemeler yapılsa bile uygulamaların beklendiği gibi çalışmasını sağlayan bir koruma görevi görür.

Çeşitli son durum vakalarını kapsayan kapsamlı testler yazmak önemli ölçüde zaman alabilirken, sorunların üretim ortamlarına ulaşmadan önce işaretlenip çözülmesine yardımcı olur.

Next.js Uygulamalarını Test Etme

Test yazmak, sağlam uygulamalar geliştirmenin temel ve genellikle hafife alınan bir yönüdür. "Kodu siz yazdınız, bu yüzden çalışması gerekir!"

Ancak bu yaklaşım, üretim ortamlarında öngörülemeyen sorunlara ve hatalara yol açabilir. Sonuç olarak, Test güdümlü geliştirme (TDD) yaklaşımını benimsemek, kodunuza olan güveninizi en üst düzeye çıkarmanıza ve harcanan zamanı en aza indirmenize yardımcı olabilir.

Şaka Nedir?

Alay tarafından yaygın olarak kullanılan popüler bir test çerçevesidir. JavaScript çerçeveleri. Güçlü bir test çalıştırıcı, otomatik alay ve anlık görüntü testi gibi bir dizi test özelliği sağlar.

İdeal olarak, bu özellikler, kapsamlı test kapsamına ulaşmada ve uygulamanızın her yerde güvenilirliğini sağlamada kullanışlıdır. farklı test türleri.

Bir Next.js Yapılacaklar Uygulaması Oluşturun

Şimdi Jest kullanarak bir Next.js uygulamasında birim testleri çalıştırma sürecini inceleyelim. Ancak başlamadan önce bir Next.js projesi oluşturun ve gerekli bağımlılıkları kurun.

Başlamak için şu adımları izleyin:

1. Terminalinizde aşağıdaki komutu çalıştırarak yeni bir Next.js projesi oluşturun:

   npx create-next-app@latest test eğitimi

2. Projeyi oluşturduktan sonra, şunu çalıştırarak proje dizinine gidin:

   cd nextjs-test-öğretici

3. Gerekli bağımlılıkları şu şekilde kurun: devBağımlılıklar aşağıdaki komutu çalıştırarak:

   npm kurulum npm kurulum --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Proje ayarlandıktan ve bağımlılıklar yüklendikten sonra artık Next.js uygulamasını oluşturmaya ve Jest kullanarak birim testleri yazmaya hazırsınız.

Yapılacaklar Bileşenini Oluşturun

İçinde /src proje dizini açın sayfalar/index.js dosyasını açın, mevcut ortak Next.js kodunu silin ve aşağıdaki kodu ekleyin.

İlk olarak, aşağıdaki içe aktarmaları yapın ve kullanıcının Yapılacak İşlerini yönetecek iki işlevi tanımlayın: ekleTodo fonksiyon ve silTodo işlev.

içe aktarmak { kullanımDevlet } itibaren"tepki";
içe aktarmak stiller itibaren"../styles/Home.module.css";
ihracatvarsayılanişlevEv() {
sabit [todos, setTodos] = useState([]);
sabit [newTodo, setNewTodo] = useState("");
sabit ekleTodo = () => {
eğer (newTodo.trim() !== "") {
sabit güncellenmiş Yapılacaklar = [... yapılacaklar, yeni Yapılacaklar];
 setTodos (updatedTodos);
 setNewTodo("");
 }
 };
sabit silTodo = (dizin) => {
sabit güncellendiYapılacaklar = [... yapılacaklar];
 güncellendiTodos.splice (dizin, 1);
 setTodos (updatedTodos);
 };

Kod, kullanımDevlet durum değişkenlerini başlatmak ve güncellemek için kanca: todos Ve yeni Yapılacak. bu ekleTodo işlevi, giriş değeri boş olmadığında yapılacaklar listesine yeni bir Yapılacaklar eklerken, silTodo işlevi, dizinine göre belirli bir Yapılacak İşi listeden kaldırır.

Şimdi, tarayıcının DOM'unda işlenen JSX öğelerinin kodunu yazın.

geri dönmek (


 tür="metin"
 className={styles.input}
 değer={yeniYapılacak}
 veri-test kimliği="yapılacak girdi"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"yapılacak iş ekle">
 Yapılacak İşi Ekle
 </button>
"yapılacaklar listesi">
 {todos.map((yapılacaklar, dizin) => (


 {yapmak}
 </li>
 ))}
 </ul>
 {todos.map((yapılacaklar, dizin) => (


 onClick={() => silTodo (dizin)}
 className={styles.button}
 data-testid={`yapılacak şeyi sil-${dizin}`}
 >
 Silmek
 </button>
 </div>
 ))}
 </div>
 );}

Test Senaryoları Yazma

Test senaryoları yazmaya başlamadan önce, Jest'i özel test gereksinimlerinize göre yapılandırmanız çok önemlidir. Bu, oluşturmayı ve özelleştirmeyi içerir. jest.config.js test kurulumunuzun temelini oluşturan dosya.

Kök dizinde yeni bir tane oluşturun. jest.config.js dosya. Ardından, Jest'i buna göre yapılandırmak için aşağıdaki kodu ekleyin:

sabit sonrakiJest = gerekmek("sonraki / şaka");
sabit createJestConfig = nextJest({
 yön: "./",
});
sabit customJestConfig = {
 modül dizinleri: ["node_modules", "/"],
 test ortamı: "şaka-çevre-jsdom",
};
modül.exports = createJestConfig (özelJestConfig);

Son olarak, açın paket.json adlı yeni bir komut dosyası ekleyin ve ekleyin. Ölçek bu komutu yürütecek jest --watchAll tüm test durumlarını çalıştırmak ve değişiklikleri izlemek için.

Güncellemeyi yaptıktan sonra komut dosyalarınız şöyle görünmelidir:

"Kodlar": {
"dev": "sonraki geliştirici",
"inşa etmek": "sonraki yapı",
"başlangıç": "sonraki başlangıç",
"tüy": "sonraki tüy",
"Ölçek": "şaka --watchAll"
 },

Yapılandırmalar yerindeyken, testleri yazmaya ve yürütmeye devam edin.

Next.js Yapılacaklar Uygulamasını Jest ile Test Etme

Proje kök dizininde, adlı yeni bir klasör oluşturun. __testler__. Jest, bu klasördeki test dosyalarını arayacaktır. Bu klasörün içinde, adlı yeni bir dosya oluşturun. index.test.js.

Öncelikle aşağıdaki importları yapın.

içe aktarmak Ev itibaren"../src/sayfalar/dizin";
içe aktarmak"@testing-library/şaka-dom";
içe aktarmak { fireEvent, render, ekran, waitFor, act } itibaren"@testing-library/tepki";

Tüm öğelerin doğru şekilde işlenip işlenmediğini görmek için bir test yazın:

betimlemek("Yapılacak Uygulama", () => {
 BT("yapılacaklar uygulamasını işler", () => {
 render(<Ev />);

 bekliyoruz (screen.getByTestId("yapılacak girdi")).toBeInTheDocument();
 bekliyoruz (screen.getByTestId("yapılacak iş ekle")).toBeInTheDocument();
 });
});

Test durumu, Yapılacaklar uygulamasının ve öğelerinin doğru şekilde işlendiğini doğrular. Test senaryosunun içinde, Ev bileşen kullanılarak işlenir işlemek test kitaplığından işlev.

Ardından, iddialar kullanılarak yapılır beklemek gibi test kimliklerine sahip belirli öğelerin yapılacak girdi işlenen çıktıda bulunur. Bu öğeler DOM'da bulunursa test başarılı olur; aksi halde başarısız olur.

Şimdi, testi yürütmek için aşağıdaki komutu çalıştırın.

npm çalıştırma testi

Test başarılı olursa benzer bir yanıt görmelisiniz.

Farklı Eylemleri Test Etme ve Hataları Simüle Etme

Yapılacak İşi Ekle ve Yapılacak İşi Sil özelliklerinin işlevselliğini doğrulamak için bu test durumlarını açıklayın.

Yapılacak İşi Ekle işlevi için test senaryosunu yazarak başlayın.

 BT("yapılacak iş ekler", zaman uyumsuz () => {
 render(<Ev />);

sabit todoInput = ekran.getByTestId("yapılacak girdi");
sabit addTodoButton = ekran.getByTestId("yapılacak iş ekle");
sabit yapılacaklarListesi = ekran.getByTestId("yapılacaklar listesi");
beklemek davranmak(zaman uyumsuz () => {
 fireEvent.change (todoInput, { hedef: { değer: "Yeni Yapılacaklar" } });
 addTodoButton.click();
 });
beklemek bekle(() => {
 (todoList).toHaveTextContent("Yeni Yapılacaklar");
 });
 });

Yukarıdaki kod parçacığı, bir giriş alanına yazıp ekle düğmesini tıklatarak kullanıcı etkileşimini simüle eder. Ardından, sahte bir Yapılacaklar giriş değeri kullanarak, giriş değerinin Yapılacaklar listesine başarıyla eklenip eklenmediğini doğrular.

Dosyayı kaydedin ve terminali kontrol edin. Test otomatik olarak yeniden çalıştırılmalı ve benzer test sonuçlarının oturumu kapatılmalıdır.

Bir test hatasını simüle etmek için, ekleme düğmesi test kimliğini değiştirin ve testi yeniden çalıştırın. Bu güncellemeyle, test başarısız olmalı ve karşılaşılan belirli hatayı gösteren bir hata mesajı oturumu kapatmalıdır.

İdeal olarak, birden fazla katılımcının sık sık değişiklik yaptığı daha büyük bir kod tabanında, test etme, sistem arızalarına yol açabilecek potansiyel hataları belirlemede çok önemli bir rol oynar. Test ederek, yukarıda gösterildiği gibi tutarsızlıkları kolayca işaretleyebilir ve bunları geliştirme sırasında çözebilirsiniz.

Son olarak, Yapılacak İşi Sil işlevi için test senaryosunu yazın.

 BT("bir yapılacak işi siler", zaman uyumsuz () => {
 render(<Ev />);

sabit todoInput = ekran.getByTestId("yapılacak girdi");
sabit addTodoButton = ekran.getByTestId("yapılacak iş ekle");

 fireEvent.change (todoInput, { hedef: { değer: "Yapılacak 1" } });
 fireEvent.click (addTodoButton);

sabit deleteTodoButton = ekran.getByTestId("sil-yapılacak-0");
 fireEvent.click (deleteTodoButton);

sabit yapılacaklarListesi = ekran.getByTestId("yapılacaklar listesi");
beklemek bekle(() => {
 wait (todoList).toBeEmptyDOMElement();
 });
 });

Yine, Yapılacak'ın başarıyla silinip silinmediğini doğrular. Testi yürütmek için dosyayı kaydedin.

Jest Kullanarak Birim Testi

Bu kılavuz, örnek olarak bir Yapılacaklar bileşeni kullanarak basit birim testleri yazma ve yürütme bilgisini size sağlamıştır. Uygulamanızın temel özelliklerinin kararlılığını ve güvenilirliğini sağlamak ve Üretim ortamlarında beklenmeyen sorunlarla karşılaştığınızda, anahtarınız için yazma testlerine öncelik vermeniz önemlidir. bileşenler.

Ayrıca anlık görüntü testleri ve uçtan uca testleri birleştirerek test yaklaşımınızı geliştirebilirsiniz.