React Native Academy · Lektion

Opsætning af Jest i et React Native-projekt

Konfigurér Jest med react-native-presettet, kør Deres første testfil, forstå API'et for test, describe og expect, og opsæt rapportering af kodedækning.

Lektion 1 af 413 trin

Opsætning af Jest i et React Native-projekt er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvorfor du bør teste React Native-kode

Test er dit sikkerhedsnet, når du foretager ændringer. En velskrevet testsuite giver dig mulighed for at refaktorere med tillid, opdage regressioner, før de når brugerne, og dokumentere den forventede adfærd for dine teammedlemmer. I React Native er test især værdifulde, fordi det er langsommere at køre hele appen i en simulator end at køre enhedstest.

Der er tre testniveauer i React Native: enhedstest (individuelle funktioner og hooks), komponenttest (gengivelse af komponenter og kontrol af output) og ende-til-ende-test (styring af den rigtige app på en enhed). Jest håndterer de to første.

Jest leveres forudkonfigureret

React Native-projekter, der oprettes med React Native CLI eller Expo SDK, inkluderer allerede Jest. Du finder jest i devDependencies og en Jest-konfiguration i package.json under nøglen 'jest' eller i en jest.config.js-fil.

Preset'et 'react-native' (fra @react-native/jest-preset) eller 'jest-expo' (til Expo) konfigurerer Jest til at transformere JSX og automatisk håndtere mocks af native moduler. Brug altid det preset, der passer til din projekttype.

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

Kør din første test

Kør test med npx jest eller blot yarn test. Jest finder alle filer, der matcher *.test.ts, *.test.tsx, *.spec.ts, eller filer i mapper med navnet __tests__. Tilføj --watch for automatisk at køre test igen, når filer ændres — det er den anbefalede arbejdsgang under udvikling.

Et nyoprettet projekt indeholder en eksempeltest i App.test.tsx. Når du kører den, bekræfter du, at din Jest-konfiguration fungerer, før du skriver dine egne test.

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

En tests anatomi

En Jest-testfil bruger tre centrale funktioner: describe grupperer relaterede test, it (eller test) definerer ét testtilfælde, og expect fremsætter påstande om værdier. Mønstret er: arrange (opsæt data), act (kør koden), assert (bekræft outputtet).

Testnavne bør beskrive den forventede adfærd i almindeligt sprog. Gode testnavne fungerer som dokumentation: 'skal returnere null, når inputtet er tomt' er tydeligere end '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();
  });
});

Almindelige Jest-matchere

Jest indeholder et omfattende sæt af matchere — metoder på expect-objektet, der kontrollerer værdier på forskellige måder. De mest almindelige matchere til React Native-test er:

toBe(value) — streng lighed med ===
toEqual(value) — dyb lighed for objekter og arrays
toBeTruthy() / toBeFalsy() — kontrol af truthy/falsy
toContain(item) — arrayet indeholder elementet
toThrow() — funktionen kaster en fejl

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

Test af rene funktioner

De nemmeste ting at teste er rene funktioner — funktioner, der tager input, returnerer output og ikke har bivirkninger. Eksempler omfatter valideringsfunktioner, datatransformatorer og hjælpefunktioner. Disse test er hurtige og kræver ingen mocking.

Skriv én test pr. kanttilfælde. Test den normale sti (gyldigt input), grænsetilfælde (tom streng, nul, null) og fejlsituationer (ugyldigt input). Det er her, forholdet mellem test og kode bør være højest.

// 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 med jest.fn()

jest.fn() opretter en mockfunktion — en falsk implementering, der registrerer, hvordan den blev kaldt. Du kan give mockfunktioner som props til komponenter eller indsætte dem som afhængigheder for at isolere den kode, der testes, fra dens faktiske samarbejdspartnere.

Når koden, der testes, er kørt, kan du lave forventninger til mockfunktionen ved hjælp af matchere som toHaveBeenCalled(), toHaveBeenCalledWith(args) og toHaveBeenCalledTimes(n). På den måde kan du kontrollere, at din kode kalder eksterne API'er eller callbacks korrekt uden faktisk at sende netværksforespørgsler.

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

Modul-mocking med jest.mock()

jest.mock('module-name') erstatter et helt modul med en automatisk mock-version, hvor alle eksporterede funktioner bliver til jest.fn(). Det er vigtigt, når du skal mocke native moduler, som ikke kan køre i Jest Node.js-miljøet.

Kald jest.mock() øverst i testfilen. Jest flytter automatisk mock-kald til toppen af filen, så de bliver sat op, før importer køres. Brug jest.requireActual til at bevare dele af det faktiske modul.

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

Rapporter om kodedækning

Jest kan måle kodedækning — hvor stor en procentdel af din kode der køres af test. Kør jest --coverage for at generere en dækningsrapport i terminalen og en HTML-rapport i coverage/lcov-report/index.html.

Rapporten viser fire målinger pr. fil: Statements (kodelinjer, der er kørt), Branches (if/else-stier, der er fulgt), Functions (funktioner, der er kaldt) og Lines. Fokuser på at dække kritisk forretningslogik, fejlhåndteringsstier og hjælpefunktioner — 80-90 % dækning af disse er mere værdifuldt end 100 % dækning af simple render-komponenter.

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

Opsætning og oprydning med beforeEach og afterEach

beforeEach og afterEach kører opsætnings- og oprydningskode omkring hver test i en describe-blok. Brug beforeEach til at nulstille mocks, initialisere testdata eller oprette en ny komponentinstans. Brug afterEach til at rydde timere, abonnementer eller asynkrone operationer op.

beforeAll og afterAll kører én gang før eller efter alle test i en describe-blok — det er nyttigt til ressourcekrævende opsætning som at åbne en databaseforbindelse, der deles af flere test.

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

Test af asynkron kode med async/await

De fleste React Native-operationer er asynkrone. Jest understøtter async/await direkte i testfunktioner. Returnér løftet (eller brug async/await), så Jest ved, at den skal vente på, at det bliver opfyldt, før testen markeres som bestået.

Til kode, der bruger setTimeout eller setInterval, kan du bruge jest.useFakeTimers() til at styre tiden i test. Kald jest.runAllTimers() for at spole hurtigt frem gennem alle ventende timere uden faktisk at vente.

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

Hurtigt tjek

Test din forståelse af begreberne inden for React Native-mobiludvikling fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion har du lært: hvordan Jest konfigureres i React Native- og Expo-projekter via presets, hvordan du skriver enhedstest til rene funktioner ved hjælp af arrange-act-assert-mønsteret og hvordan du mocker funktioner og moduler med jest.fn() og jest.mock() for at isolere den kode, der testes. Nu skal du lære at rendere React Native-komponenter i test ved hjælp af React Native Testing Library.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Opsætning af Jest i et React Native-projekt” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Opsætning af Jest i et React Native-projekt”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Opsætning af Jest i et React Native-projekt”?

Konfigurér Jest med react-native-presettet, kør Deres første testfil, forstå API'et for test, describe og expect, og opsæt rapportering af kodedækning. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Opsætning af Jest i et React Native-projekt”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Opsætning af Jest i et React Native-projekt
Gengivelse af komponenter med React Native Testing Library
Udløsning af hændelser og test af brugerinteraktion
Mocking af native moduler og asynkron kode

← Tilbage til React Native Academy