Cara Menguji Aplikasi Next.js Menggunakan Jest

Tujuan utama dari setiap proses pengembangan adalah membangun aplikasi siap produksi. Untuk mencapai hal ini, sangat penting untuk menulis kode yang tidak hanya memenuhi persyaratan fungsional tetapi juga tetap stabil dan dapat diandalkan dari waktu ke waktu. Pengujian berfungsi sebagai pengamanan, memastikan bahwa aplikasi berfungsi seperti yang diharapkan bahkan saat pembaruan baru dibuat selama pengembangan.

Meskipun menulis pengujian komprehensif yang mencakup berbagai kasus edge mungkin memerlukan banyak waktu, ada baiknya menandai dan menyelesaikan masalah sebelum mencapai lingkungan produksi.

Menguji Aplikasi Next.js

Tes menulis adalah aspek penting dan sering diremehkan dalam mengembangkan aplikasi yang kuat. Sangat mudah untuk jatuh ke dalam godaan kode pengiriman langsung ke produksi, dengan mengandalkan keyakinan bahwa "Anda yang menulis kodenya, jadi itu harus berhasil!"

Namun, pendekatan ini dapat menyebabkan masalah dan bug yang tidak terduga di lingkungan produksi. Akibatnya, mengadopsi pendekatan Test-driven development (TDD) dapat membantu memaksimalkan kepercayaan Anda pada kode Anda dan meminimalkan waktu yang dihabiskan

Apa itu Jest?

Bersenda gurau adalah kerangka pengujian populer yang banyak digunakan oleh berbagai kerangka JavaScript. Ini menyediakan serangkaian fitur pengujian seperti test runner yang kuat, mocking otomatis, dan pengujian snapshot.

Idealnya, fitur ini berguna untuk mencapai cakupan pengujian yang komprehensif dan memastikan keandalan aplikasi Anda berbagai jenis tes.

Buat Aplikasi To-Do Next.js

Sekarang, mari selami proses menjalankan pengujian unit pada aplikasi Next.js menggunakan Jest. Namun, sebelum memulai, buat proyek Next.js dan instal dependensi yang diperlukan.

Untuk memulai, ikuti langkah-langkah berikut:

1. Buat proyek Next.js baru dengan menjalankan perintah berikut di terminal Anda:

   npx create-next-app@latest test-tutorial

2. Setelah membuat proyek, navigasikan ke direktori proyek dengan menjalankan:

   cd nextjs-test-tutorial

3. Instal dependensi yang diperlukan sebagai devDependencies dengan menjalankan perintah berikut:

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

Dengan penyiapan proyek, dan dependensi terinstal, Anda sekarang siap untuk membangun aplikasi Next.js dan menulis pengujian unit menggunakan Jest.

Buat Komponen Agenda

Dalam /src direktori proyek, buka halaman/index.js file, hapus kode Next.js boilerplate yang ada, dan tambahkan kode berikut.

Pertama, lakukan impor berikut dan tentukan dua fungsi yang akan mengelola To-Dos pengguna: addTodo fungsi dan hapusTodo fungsi.

impor { status penggunaan } dari"reaksi";
impor gaya dari"../styles/Home.module.css";
eksporbawaanfungsiRumah() {
const [todos, setTodos] = useState([]);
const [TodoBaru, setNewTodo] = useState("");
const addTodo = () => {
jika (newTodo.trim() !== "") {
const updatedTodos = [...todos, newTodo];
 setTodos (diperbaruiTodos);
 setNewTodo("");
 }
 };
const hapusTodo = (indeks) => {
const updatedTodos = [...todos];
 updatedTodos.splice (indeks, 1);
 setTodos (diperbaruiTodos);
 };

Kode menggunakan useState kait untuk menginisialisasi dan memperbarui variabel status: todos Dan newTodo. Itu addTodo fungsi menambahkan To-Do baru ke daftar todos ketika nilai input tidak kosong, sedangkan hapusTodo fungsi menghapus To-Do tertentu dari daftar berdasarkan indeksnya.

Sekarang, tulis kode untuk elemen JSX yang dirender di DOM browser.

kembali (


 jenis="teks"
 className={styles.input}
 nilai={Todo baru}
 data-testid="input-todo"
 onChange={(e) => setNewTodo (e.target.nilai)}
 />
"tambah-todo">
 Tambahkan Todo
 </button>
"daftar-todo">
 {todos.peta((lakukan, indeks) => (


 {melakukan}
 </li>
 ))}
 </ul>
 {todos.peta((lakukan, indeks) => (


 onClick={() => deleteTodo (indeks)}
 className={styles.button}
 data-testid={`hapus-todo-${indeks}`}
 >
 Menghapus
 </button>
 </div>
 ))}
 </div>
 );}

Menulis Uji Kasus

Sebelum Anda mulai menulis kasus pengujian, sangat penting untuk mengonfigurasi Jest sesuai dengan persyaratan pengujian khusus Anda. Ini melibatkan pembuatan dan penyesuaian jest.config.js file, yang berfungsi sebagai dasar untuk penyiapan pengujian Anda.

Di direktori root, buat yang baru jest.config.js mengajukan. Kemudian, tambahkan kode berikut untuk mengonfigurasi Jest sesuai:

const nextJest = memerlukan("berikutnya/bercanda");
const createJestConfig = nextJest({
 arah: "./",
});
const customJestConfig = {
 Direktori modul: ["node_modules", "/"],
 lingkungan uji: "jest-lingkungan-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Akhirnya, buka package.json file dan tambahkan skrip baru bernama tes yang akan mengeksekusi perintah bercanda --watchAll untuk menjalankan semua kasus uji dan melihat setiap perubahan.

Setelah melakukan pembaruan, skrip Anda akan terlihat seperti ini:

"skrip": {
"dev": "pengembang berikutnya",
"membangun": "membangun selanjutnya",
"awal": "mulai berikutnya",
"serat": "serat berikutnya",
"tes": "bercanda --watchAll"
 },

Dengan konfigurasi di tempat, lanjutkan dengan menulis dan menjalankan tes.

Menguji Aplikasi Agenda Next.js Dengan Jest

Di direktori root proyek, buat folder baru bernama __tes__. Jest akan mencari file uji di folder ini. Di dalam folder ini, buat file baru bernama index.test.js.

Pertama, lakukan impor berikut.

impor Rumah dari"../src/halaman/indeks";
impor"@testing-library/jest-dom";
impor { fireEvent, render, layar, tunggu, bertindak } dari"@testing-library/react";

Tulis tes untuk melihat apakah semua elemen dirender dengan benar:

menggambarkan("Aplikasi Todo", () => {
 dia("merender aplikasi todo", () => {
 memberikan(<Rumah />);

 harapkan (screen.getByTestId("input-todo")).toBeInTheDocument();
 harapkan (screen.getByTestId("tambah-todo")).toBeInTheDocument();
 });
});

Kasus pengujian memverifikasi bahwa aplikasi To-Do dan elemennya dirender dengan benar. Di dalam test case, the Rumah komponen dirender menggunakan memberikan fungsi dari perpustakaan pengujian.

Kemudian, pernyataan dibuat dengan menggunakan mengharapkan berfungsi untuk memastikan bahwa elemen tertentu dengan ID pengujian, seperti todo-input hadir dalam output yang diberikan. Jika elemen ini ditemukan di DOM, pengujian akan lulus; jika tidak, itu gagal.

Sekarang, jalankan perintah berikut untuk menjalankan tes.

uji coba npm

Anda akan melihat respons serupa jika tes lulus.

Menguji Berbagai Tindakan dan Mensimulasikan Kesalahan

Jelaskan kasus pengujian ini untuk memverifikasi fungsionalitas fitur Tambahkan Agenda dan Hapus Agenda.

Mulailah dengan menulis test case untuk fungsionalitas Add To-Do.

 dia("menambahkan todo", asinkron () => {
 memberikan(<Rumah />);

const todoInput = layar.getByTestId("input-todo");
const addTodoButton = layar.getByTestId("tambah-todo");
const todoList = layar.getByTestId("daftar-todo");
menunggu bertindak(asinkron () => {
 fireEvent.change (todoInput, { target: { nilai: "Todo Baru" } });
 addTodoButton.klik();
 });
menunggu tunggu(() => {
 harapkan (todoList).toHaveTextContent("Todo Baru");
 });
 });

Cuplikan kode di atas mensimulasikan interaksi pengguna dengan mengetik ke kolom input dan mengklik tombol tambah. Kemudian, menggunakan nilai input To-Do palsu, Verifikasi apakah nilai input berhasil ditambahkan ke daftar To-Do.

Simpan file dan periksa terminal. Tes harus dijalankan ulang secara otomatis dan keluar dari hasil tes yang serupa.

Untuk mensimulasikan error pengujian, ubah ID pengujian tombol tambah dan jalankan kembali pengujian. Dengan pembaruan ini, pengujian harus gagal dan mengeluarkan pesan kesalahan yang menunjukkan kesalahan spesifik yang ditemui.

Idealnya, dalam basis kode yang lebih besar dengan banyak kontributor yang sering melakukan perubahan, pengujian memainkan peran penting dalam mengidentifikasi potensi bug yang dapat menyebabkan kegagalan sistem. Dengan pengujian, Anda dapat dengan mudah menandai ketidakkonsistenan, seperti yang ditunjukkan di atas, dan menyelesaikannya selama pengembangan.

Terakhir, tulis kasus uji untuk fungsionalitas Hapus Agenda.

 dia("menghapus todo", asinkron () => {
 memberikan(<Rumah />);

const todoInput = layar.getByTestId("input-todo");
const addTodoButton = layar.getByTestId("tambah-todo");

 fireEvent.change (todoInput, { target: { nilai: "Todo 1" } });
 fireEvent.klik (addTodoButton);

const deleteTodoButton = layar.getByTestId("hapus-todo-0");
 fireEvent.klik (deleteTodoButton);

const todoList = layar.getByTestId("daftar-todo");
menunggu tunggu(() => {
 mengharapkan (todoList).toBeEmptyDOMElement();
 });
 });

Sekali lagi, ini memverifikasi jika To-Do berhasil dihapus. Simpan file untuk menjalankan tes.

Pengujian Unit Menggunakan Jest

Panduan ini telah memberi Anda pengetahuan untuk menulis dan menjalankan pengujian unit sederhana, menggunakan komponen To-Do sebagai contoh. Untuk memastikan stabilitas dan keandalan fitur inti aplikasi Anda dan mengurangi kemungkinan masalah tak terduga di lingkungan produksi, penting untuk memprioritaskan tes penulisan untuk kunci Anda komponen.

Selain itu, Anda dapat meningkatkan pendekatan pengujian dengan menggabungkan pengujian snapshot dan pengujian end-to-end.