React Native Academy · Ders

React Native Projesinde Jest'i Kurma

Jest'i react-native ön ayarıyla yapılandırın, ilk test dosyanızı çalıştırın, test, describe ve expect API'lerini öğrenin ve kod kapsamı raporlamasını kurun.

React Native Projesinde Jest'i Kurma, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Why Testing React Native Code

Tests are your safety net when making changes. A well-written test suite lets you refactor confidently, catch regressions before they reach users, and document expected behavior for your teammates. For React Native specifically, tests are especially valuable because running the full app on a simulator is slow compared to running unit tests.

There are three levels of testing in React Native: unit tests (individual functions and hooks), component tests (rendering components and asserting on output), and end-to-end tests (driving the real app on a device). Jest handles the first two.

Jest Comes Pre-Configured

React Native projects created with the React Native CLI or Expo SDK already include Jest. You will find jest in devDependencies and a Jest configuration in package.json under the 'jest' key, or in a jest.config.js file.

The preset 'react-native' (from @react-native/jest-preset) or 'jest-expo' (for Expo) configures Jest to transform JSX and handle native module mocks automatically. Always use the appropriate preset for your project type.

// 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/.*)'
    ]
  }
}

Running Your First Test

Run tests with npx jest or just yarn test. Jest finds all files matching *.test.ts, *.test.tsx, *.spec.ts, or files inside __tests__ folders. Add --watch to rerun tests automatically when files change — this is the recommended workflow during development.

A newly scaffolded project includes a sample test in App.test.tsx. Running it confirms your Jest setup is working before you write your own tests.

# 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'

The Anatomy of a Test

A Jest test file uses three core functions: describe groups related tests, it (or test) defines a single test case, and expect makes assertions about values. The pattern is: arrange (set up data), act (run the code), assert (verify the output).

Test names should describe the expected behavior in plain English. Good test names read like documentation: 'should return null when the input is empty' is clearer than '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();
  });
});

Common Jest Matchers

Jest provides a rich set of matchers — methods on the expect object that check values in different ways. The most common matchers for React Native tests are:

toBe(value) — strict equality with ===
toEqual(value) — deep equality for objects and arrays
toBeTruthy() / toBeFalsy() — truthy/falsy checks
toContain(item) — array contains item
toThrow() — function throws an error

// 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);

Testing Pure Functions

The easiest things to test are pure functions — functions that take input, return output, and have no side effects. Examples include validation functions, data transformers, and utility helpers. These tests are fast and require no mocking.

Write one test per edge case. Test the happy path (valid input), boundary conditions (empty string, zero, null), and error cases (invalid input). This is where your test-to-code ratio should be highest.

// 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);
  });
});

Mocking with jest.fn()

jest.fn() creates a mock function — a fake implementation that records how it was called. You pass mock functions as props to components or inject them as dependencies to isolate the code under test from its real collaborators.

After running the code under test, assert on the mock using matchers like toHaveBeenCalled(), toHaveBeenCalledWith(args), and toHaveBeenCalledTimes(n). This lets you verify that your code correctly calls external APIs or callbacks without actually making network requests.

// 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);

Module Mocking with jest.mock()

jest.mock('module-name') replaces an entire module with an auto-mocked version where all exported functions become jest.fn(). This is essential for mocking native modules, which cannot run in the Jest Node.js environment.

Call jest.mock() at the top of the test file. Jest hoists mock calls to the top of the file automatically, so they are set up before any imports run. Use jest.requireActual to preserve parts of the real module.

// 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' } }),
}));

Code Coverage Reports

Jest can measure code coverage — what percentage of your code is executed by tests. Run jest --coverage to generate a coverage report in the terminal and an HTML report in coverage/lcov-report/index.html.

The report shows four metrics per file: Statements (lines of code executed), Branches (if/else paths taken), Functions (functions called), and Lines. Focus on covering critical business logic, error handling paths, and utility functions — 80-90% coverage on those is more valuable than 100% coverage on simple render components.

# 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,
    },
  },
};

Setup and Teardown with beforeEach and afterEach

beforeEach and afterEach run setup and cleanup code around each test in a describe block. Use beforeEach to reset mocks, initialize test data, or create a fresh component instance. Use afterEach to clean up timers, subscriptions, or async operations.

beforeAll and afterAll run once before/after all tests in a describe block — useful for expensive setup like opening a database connection that is shared across tests.

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();
  });
});

Testing Async Code with async/await

Most React Native operations are asynchronous. Jest supports async/await directly in test functions. Return the promise (or use async/await) so Jest knows to wait for it to resolve before marking the test as passed.

For code that uses setTimeout or setInterval, use jest.useFakeTimers() to control time in tests. Call jest.runAllTimers() to fast-forward all pending timers without actually waiting.

// 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);
});

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: how Jest is configured in React Native and Expo projects via presets, how to write unit tests for pure functions using the arrange-act-assert pattern, and how to mock functions and modules with jest.fn() and jest.mock() to isolate code under test. Next up we render React Native components in tests using React Native Testing Library.

Sıkça Sorulan Sorular

“React Native Projesinde Jest'i Kurma” dersi ücretsiz mi?

Evet — “React Native Projesinde Jest'i Kurma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.

“React Native Projesinde Jest'i Kurma” dersinde ne öğreneceğim?

Jest'i react-native ön ayarıyla yapılandırın, ilk test dosyanızı çalıştırın, test, describe ve expect API'lerini öğrenin ve kod kapsamı raporlamasını kurun. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Native Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“React Native Projesinde Jest'i Kurma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

React Native Projesinde Jest'i Kurma
React Native Testing Library ile Bileşenleri İşleme
Olayları Tetikleme ve Kullanıcı Etkileşimini Test Etme
Yerel Modülleri ve Eşzamansız Kodu Taklit Etme

← React Native Academy Sayfasına Dön