React Native Academy · Pelajaran

Menyediakan Jest dalam Projek React Native

Konfigurasikan Jest dengan pratetap react-native, jalankan fail test pertama anda, fahami API test, describe dan expect, serta sediakan pelaporan liputan kod.

Pelajaran 1 daripada 413 langkah

Menyediakan Jest dalam Projek React Native ialah pelajaran React Native Academy 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 React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Sebab Menguji Kod React Native

Ujian ialah jaring keselamatan anda apabila membuat perubahan. Set ujian yang ditulis dengan baik membolehkan anda memfaktor semula dengan yakin, mengesan kemunduran sebelum sampai kepada pengguna dan mendokumentasikan tingkah laku yang dijangka untuk rakan sepasukan. Khususnya untuk React Native, ujian amat bernilai kerana menjalankan aplikasi penuh pada simulator adalah lambat berbanding menjalankan ujian unit.

Terdapat tiga peringkat pengujian dalam React Native: ujian unit (fungsi dan cangkuk individu), ujian komponen (memaparkan komponen dan membuat penegasan terhadap output), dan ujian hujung ke hujung (mengawal aplikasi sebenar pada peranti). Jest mengendalikan dua peringkat pertama.

Jest Telah Dikonfigurasi Awal

Projek React Native yang dicipta dengan React Native CLI atau Expo SDK sudah menyertakan Jest. Anda akan menemukan jest dalam devDependencies dan konfigurasi Jest dalam package.json di bawah kunci 'jest', atau dalam fail jest.config.js.

Praset 'react-native' (daripada @react-native/jest-preset) atau 'jest-expo' (untuk Expo) mengkonfigurasi Jest untuk mengubah JSX dan mengendalikan mock modul natif secara automatik. Sentiasa gunakan praset yang sesuai untuk jenis projek anda.

// package.json (React Native CLI project)
{
  'jest': {
    'preset': 'react-native'
  }
}

// package.json (Expo project)
{
  'jest': {
    'preset': 'jest-expo',
    'transformIgnorePatterns': [
      'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*)'
    ]
  }
}

Menjalankan Ujian Pertama Anda

Jalankan ujian dengan npx jest atau hanya yarn test. Jest mencari semua fail yang sepadan dengan *.test.ts, *.test.tsx, *.spec.ts atau fail dalam folder __tests__. Tambahkan --watch untuk menjalankan semula ujian secara automatik apabila fail berubah — ini ialah aliran kerja yang disyorkan semasa pembangunan.

Projek yang baru dijana menyertakan ujian contoh dalam App.test.tsx. Menjalankannya mengesahkan bahawa persediaan Jest anda berfungsi sebelum anda menulis ujian sendiri.

# Run all tests once
npx jest

# Run in watch mode (rerun on file change)
npx jest --watch

# Run a specific test file
npx jest src/utils/formatDate.test.ts

# Run tests matching a pattern
npx jest --testNamePattern='should format'

Anatomi Ujian

Fail ujian Jest menggunakan tiga fungsi teras: describe mengumpulkan ujian berkaitan, it (atau test) mentakrifkan satu kes ujian, dan expect membuat penegasan tentang nilai. Coraknya ialah: susun (sediakan data), laksanakan (jalankan kod), sahkan (sahkan output).

Nama ujian hendaklah menerangkan tingkah laku yang dijangka dalam bahasa biasa. Nama ujian yang baik berbunyi seperti dokumentasi: 'should return null when the input is empty' lebih jelas daripada 'test1'.

// src/utils/formatDate.test.ts
import { formatDate } from './formatDate';

describe('formatDate', () => {
  it('should format a date as MMM DD, YYYY', () => {
    // Arrange
    const date = new Date('2024-03-15T10:00:00Z');

    // Act
    const result = formatDate(date);

    // Assert
    expect(result).toBe('Mar 15, 2024');
  });

  it('should return null when the input is null', () => {
    expect(formatDate(null)).toBeNull();
  });
});

Pemadan Jest yang Lazim

Jest menyediakan set pemadan yang lengkap — kaedah pada objek expect yang menyemak nilai dengan pelbagai cara. Pemadan yang paling biasa untuk ujian React Native ialah:

toBe(value) — kesamaan ketat dengan ===
toEqual(value) — kesamaan mendalam untuk objek dan tatasusunan
toBeTruthy() / toBeFalsy() — semakan benar/palsu
toContain(item) — tatasusunan mengandungi item
toThrow() — fungsi menghasilkan ralat

// Strict equality (for primitives)
expect(2 + 2).toBe(4);

// Deep equality (for objects)
expect({ name: 'Alice', age: 30 }).toEqual({ name: 'Alice', age: 30 });

// Array checks
expect(['a', 'b', 'c']).toContain('b');
expect(['a', 'b', 'c']).toHaveLength(3);

// Null / undefined
expect(null).toBeNull();
expect(undefined).toBeUndefined();

// Error throwing
expect(() => JSON.parse('invalid')).toThrow(SyntaxError);

Menguji Fungsi Tulen

Perkara yang paling mudah untuk diuji ialah fungsi tulen — fungsi yang menerima input, mengembalikan output dan tidak mempunyai kesan sampingan. Contohnya termasuk fungsi pengesahan, pengubah data dan fungsi utiliti pembantu. Ujian ini pantas dan tidak memerlukan mocking.

Tulis satu ujian bagi setiap kes pinggir. Uji laluan berjaya (input yang sah), keadaan sempadan (rentetan kosong, sifar, null) dan kes ralat (input yang tidak sah). Di sinilah nisbah ujian kepada kod anda sepatutnya paling tinggi.

// src/utils/validators.ts
export function isValidEmail(email: string): boolean {
  return /^[^@]+@[^@]+\.[^@]+$/.test(email);
}

// src/utils/validators.test.ts
import { isValidEmail } from './validators';

describe('isValidEmail', () => {
  it('should return true for a valid email', () => {
    expect(isValidEmail('user@example.com')).toBe(true);
  });

  it('should return false for an email without @', () => {
    expect(isValidEmail('notanemail.com')).toBe(false);
  });

  it('should return false for an empty string', () => {
    expect(isValidEmail('')).toBe(false);
  });
});

Melakukan Mocking dengan jest.fn()

jest.fn() mencipta fungsi mock — pelaksanaan palsu yang merekodkan cara fungsi itu dipanggil. Anda menghantar fungsi mock sebagai props kepada komponen atau menyuntikkannya sebagai kebergantungan untuk mengasingkan kod yang diuji daripada kolaborator sebenar.

Selepas menjalankan kod yang diuji, buat penegasan pada mock menggunakan pemadan seperti toHaveBeenCalled(), toHaveBeenCalledWith(args) dan toHaveBeenCalledTimes(n). Dengan ini, anda boleh mengesahkan bahawa kod anda memanggil API luaran atau callback dengan betul tanpa benar-benar membuat permintaan rangkaian.

// Test that a submit handler calls the API with the correct arguments
const mockSubmit = jest.fn().mockResolvedValue({ success: true });

await handleFormSubmit({ email: 'user@test.com' }, mockSubmit);

expect(mockSubmit).toHaveBeenCalledTimes(1);
expect(mockSubmit).toHaveBeenCalledWith({ email: 'user@test.com' });

// Mock return values
const mockFetch = jest.fn().mockResolvedValue([{ id: '1', title: 'Post' }]);
const posts = await fetchPosts(mockFetch);
expect(posts).toHaveLength(1);

Melakukan Mocking Modul dengan jest.mock()

jest.mock('module-name') menggantikan keseluruhan modul dengan versi yang dibuat secara automatik, yang menjadikan semua fungsi yang dieksport sebagai jest.fn(). Ini penting untuk melakukan mocking pada modul natif, yang tidak boleh dijalankan dalam persekitaran Jest Node.js.

Panggil jest.mock() di bahagian atas fail ujian. Jest mengangkat panggilan mock ke bahagian atas fail secara automatik, jadi panggilan tersebut disediakan sebelum sebarang import dijalankan. Gunakan jest.requireActual untuk mengekalkan bahagian modul sebenar.

// Mock expo-location
jest.mock('expo-location', () => ({
  requestForegroundPermissionsAsync: jest.fn().mockResolvedValue({ status: 'granted' }),
  getCurrentPositionAsync: jest.fn().mockResolvedValue({
    coords: { latitude: 37.78825, longitude: -122.4324 },
  }),
}));

// Mock React Navigation
jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({ navigate: jest.fn() }),
  useRoute: () => ({ params: { userId: '123' } }),
}));

Laporan Liputan Kod

Jest boleh mengukur liputan kod — peratusan kod anda yang dilaksanakan oleh ujian. Jalankan jest --coverage untuk menjana laporan liputan dalam terminal dan laporan HTML dalam coverage/lcov-report/index.html.

Laporan tersebut menunjukkan empat metrik bagi setiap fail: Pernyataan (baris kod yang dilaksanakan), Cabang (laluan if/else yang diambil), Fungsi (fungsi yang dipanggil) dan Baris. Tumpukan pada logik perniagaan kritikal, laluan pengendalian ralat dan fungsi utiliti — liputan 80-90% bagi bahagian tersebut lebih bernilai berbanding liputan 100% bagi komponen pemaparan yang ringkas.

# Run tests with coverage report
npx jest --coverage

# Coverage thresholds in jest.config.js
module.exports = {
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 70,
      functions: 80,
      lines: 80,
    },
  },
};

Penyediaan dan Pembersihan dengan beforeEach dan afterEach

beforeEach dan afterEach menjalankan kod penyediaan dan pembersihan di sekitar setiap ujian dalam blok describe. Gunakan beforeEach untuk menetapkan semula mock, memulakan data ujian atau mencipta tika komponen baharu. Gunakan afterEach untuk membersihkan pemasa, langganan atau operasi tak segerak.

beforeAll dan afterAll dijalankan sekali sebelum/selepas semua ujian dalam blok describe — berguna untuk penyediaan yang mahal seperti membuka sambungan pangkalan data yang dikongsi oleh semua ujian.

describe('AuthService', () => {
  let mockStorage: Record<string, string>;

  beforeEach(() => {
    // Fresh state before each test
    mockStorage = {};
    jest.clearAllMocks(); // Reset mock call counts
  });

  afterEach(() => {
    // Clean up any timers started during the test
    jest.useRealTimers();
  });

  it('should save the token to storage on sign in', async () => {
    await signIn('user@test.com', 'password', mockStorage);
    expect(mockStorage['authToken']).toBeDefined();
  });
});

Menguji Kod Tak Segerak dengan async/await

Kebanyakan operasi React Native adalah tak segerak. Jest menyokong async/await secara langsung dalam fungsi ujian. Kembalikan promise (atau gunakan async/await) supaya Jest tahu untuk menunggunya selesai sebelum menandakan ujian sebagai lulus.

Bagi kod yang menggunakan setTimeout atau setInterval, gunakan jest.useFakeTimers() untuk mengawal masa dalam ujian. Panggil jest.runAllTimers() untuk melangkau semua pemasa yang belum selesai dengan pantas tanpa benar-benar menunggu.

// Testing async functions
it('should return sorted posts from the API', async () => {
  const posts = await fetchAndSortPosts();
  expect(posts[0].createdAt).toBeGreaterThan(posts[1].createdAt);
});

// Testing code with timers
it('should call the callback after 1 second', () => {
  jest.useFakeTimers();
  const callback = jest.fn();

  scheduleCallback(callback, 1000);
  expect(callback).not.toHaveBeenCalled();

  jest.advanceTimersByTime(1000);
  expect(callback).toHaveBeenCalledTimes(1);
});

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Dalam pelajaran ini, anda telah mempelajari: cara Jest dikonfigurasikan dalam projek React Native dan Expo melalui pratetap, cara menulis ujian unit untuk fungsi tulen menggunakan corak susun-laksana-tegaskan dan cara melakukan mocking pada fungsi dan modul dengan jest.fn() serta jest.mock() untuk mengasingkan kod yang diuji. Seterusnya, kita akan memaparkan komponen React Native dalam ujian menggunakan Pustaka Pengujian React Native.

Percuma untuk bermula

Pelajari JavaScript 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: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menyediakan Jest dalam Projek React Native” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Menyediakan Jest dalam Projek React Native”, 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 React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyediakan Jest dalam Projek React Native”?

Konfigurasikan Jest dengan pratetap react-native, jalankan fail test pertama anda, fahami API test, describe dan expect, serta sediakan pelaporan liputan kod. Anda berlatih React Native Academy 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 React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy 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 “Menyediakan Jest dalam Projek React Native” 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 React Native Academy ini?

Ya. Setiap pelajaran React Native Academy 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

Menyediakan Jest dalam Projek React Native
Memaparkan Komponen dengan React Native Testing Library
Mencetuskan Peristiwa dan Menguji Interaksi Pengguna
Memalsukan Modul Natif dan Kod Tak Segerak

← Kembali ke React Native Academy