Aplikasi Web Fullstack Next.js 15 · Pelajaran

Ujian Unit dan Integrasi

Tulis ujian unit dan integrasi yang berkesan untuk komponen React dan fungsi Next.js menggunakan Jest dan React Testing Library.

Pelajaran 1 daripada 412 langkah

Ujian Unit dan Integrasi ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Sebab Kami Menguji Kod

Selamat datang! Dalam pembangunan web moden, khususnya dengan aplikasi kompleks yang dibina menggunakan Next.js, memastikan kod anda berfungsi seperti yang dijangkakan amat penting. Di sinilah ujian diperlukan.

Kebolehpercayaan: Ujian mencegah pepijat dan regresi.
Kebolehselenggaraan: Kod yang diuji dengan baik lebih mudah difaktor semula dan dikemas kini.
Keyakinan: Anda boleh melancarkan ciri baharu dengan lebih yakin.

Kami akan menumpukan pada Ujian Unit (bahagian kecil yang berasingan) dan Ujian Integrasi (cara bahagian-bahagian berfungsi bersama).

Menyediakan Jest dan RTL

Jest ialah rangka kerja ujian JavaScript yang popular, manakala React Testing Library (RTL) ialah sekumpulan utiliti untuk menguji komponen React. Bersama-sama, kedua-duanya membentuk gandingan yang berkuasa untuk aplikasi Next.js.

Mula-mula, pasang pakej yang diperlukan:

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

Ujian Unit Pertama Anda (Fungsi)

Ujian unit menyemak bahagian kecil kod yang berasingan, seperti satu fungsi. Mari cipta fungsi utiliti mudah dan kemudian tulis ujian untuknya.

Berikut ialah utiliti kita:

// utils/math.js
function add(a, b) {
  return a + b;
}

// This block makes the file directly runnable via Node.js
if (typeof require !== 'undefined' && require.main === module) {
  console.log("Running add(5, 3):", add(5, 3)); // Expected: 8
  console.log("Running add(10, -2):", add(10, -2)); // Expected: 8
}

Menguji Fungsi 'add'

Sekarang, mari tulis ujian untuk fungsi add kita. Jest menggunakan describe untuk mengumpulkan ujian dan test (atau it) untuk kes ujian individu. expect digunakan untuk membuat penegasan.

Simpan ini dalam utils/math.test.js:

// utils/math.test.js
import { add } from './math';

describe('add function', () => {
  test('should correctly add two positive numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('should handle negative numbers', () => {
    expect(add(5, -3)).toBe(2);
  });
});

// To run tests: npx jest

Memperkenalkan React Testing Library

React Testing Library (RTL) menggalakkan pengujian komponen dengan cara yang meniru cara pengguna berinteraksi dengannya. Daripada menyemak keadaan dalaman, anda membuat pertanyaan pada DOM untuk mencari elemen yang akan dilihat atau digunakan oleh pengguna.

render: Memasang komponen React ke dalam DOM maya.
screen: Menyediakan kaedah untuk membuat pertanyaan pada DOM yang dipaparkan (contohnya, getByText, getByRole).
@testing-library/jest-dom: Menambahkan pemadan tersuai seperti toBeInTheDocument.

Menguji Komponen React Mudah

Mari uji komponen butang asas. Kami akan memastikan komponen itu dipaparkan dengan teks yang betul.

Mula-mula, komponen tersebut (components/Button.jsx):

// components/Button.jsx
export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

Menguji Paparan Komponen

Sekarang, ujian untuk komponen Button kita. Kami menggunakan render untuk memaparkannya pada skrin dan screen.getByText untuk mencarinya, kemudian toBeInTheDocument untuk mengesahkan kehadirannya.

Simpan ini sebagai components/Button.test.jsx:

// components/Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  test('renders with the correct label', () => {
    render(<Button label="Click Me" />);
    const buttonElement = screen.getByText(/Click Me/i);
    expect(buttonElement).toBeInTheDocument();
  });
});

Mensimulasikan Interaksi Pengguna

Selain sekadar memaparkan komponen, kita perlu menguji cara komponen bertindak balas terhadap tindakan pengguna. fireEvent RTL (atau userEvent untuk interaksi yang lebih realistik) membantu mensimulasikan klik, perubahan input dan sebagainya.

Kita boleh menyemak sama ada fungsi yang dihantar melalui props telah dipanggil.

// components/Button.test.jsx (continued)
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component interactions', () => {
  test('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Jest mock function
    render(<Button label="Click Me" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Click Me/i);
    fireEvent.click(buttonElement);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Integrasi: Menguji Pengendali Laluan

Pengendali Laluan Next.js (laluan API dalam Penghala Aplikasi) ialah fungsi pada bahagian pelayan. Kita boleh mengujinya dengan mengimport dan memanggil kaedah HTTPnya secara terus (seperti GET, POST) serta memalsukan objek permintaan/tindak balas Next.js.

Berikut ialah contoh:

// app/api/hello/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' }, { status: 200 });
}

// app/api/hello/route.test.js
import { GET } from './route';

describe('GET /api/hello', () => {
  test('should return a greeting message with status 200', async () => {
    // No need to mock NextRequest/NextResponse directly for simple cases
    // as NextResponse.json returns a standard Response object.
    const response = await GET();
    const json = await response.json();

    expect(response.status).toBe(200);
    expect(json.message).toBe('Hello from API!');
  });
});

Amalan Terbaik untuk Ujian Berkesan

Untuk menulis ujian yang berguna dan mudah diselenggara:

Uji tingkah laku pengguna: Tumpukan pada perkara yang dilihat dan dilakukan oleh pengguna, bukan keadaan dalaman komponen.
Pastikan ujian tertumpu: Setiap ujian sebaik-baiknya menyemak satu perkara.
Jadikan ujian pantas: Ujian yang perlahan membuatkan orang enggan menjalankannya dengan kerap.
Kebolehbacaan: Tulis ujian yang jelas dan mudah difahami.
Jadikan kebergantungan sebagai olok-olok: Gunakan jest.mock() atau jest.fn() untuk mengasingkan unit dan menghalang faktor luaran daripada menjejaskan ujian.

Semakan Pantas

Antara pernyataan berikut tentang pengujian dalam Next.js dengan Jest dan React Testing Library, yang manakah TRUE?

Jawab dalam pelajaran interaktif

Ulang Kaji: Ujian Unit dan Integrasi

Syabas! Anda telah mempelajari asas ujian unit dan integrasi dalam Next.js:

Jest ialah rangka kerja ujian anda.
React Testing Library membantu menguji komponen seperti yang dilakukan oleh pengguna.
Ujian unit mengesahkan unit kod yang kecil dan berasingan.
Ujian integrasi menyemak cara bahagian yang berbeza (seperti komponen dan API) berfungsi bersama.
Anda boleh menguji fungsi, komponen React dan Pengendali Laluan Next.js.
Amalan terbaik termasuk menumpukan pada tingkah laku pengguna dan menjadikan kebergantungan sebagai olok-olok.

Seterusnya, kita akan meneroka ujian End-to-End untuk aliran aplikasi yang lengkap!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Ujian Unit dan Integrasi” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Ujian Unit dan Integrasi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Ujian Unit dan Integrasi”?

Tulis ujian unit dan integrasi yang berkesan untuk komponen React dan fungsi Next.js menggunakan Jest dan React Testing Library. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Ujian Unit dan Integrasi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Ujian Unit dan Integrasi
Ujian Hujung ke Hujung dengan Playwright
Monorepo dan Mikrobahagian Hadapan
Penyamaran dan Pengujian Komponen Pelayan

← Kembali ke Aplikasi Web Fullstack Next.js 15