React Native Academy · Lektion

Rendera komponenter med React Native Testing Library

Använd render från @testing-library/react-native för att montera komponenter, söka efter element med text eller testID och kontrollera att det förväntade innehållet visas.

Lektion 2 av 413 steg

Rendera komponenter med React Native Testing Library är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad är React Native Testing Library?

React Native Testing Library (RNTL) är standardverktyget för att skriva komponenttester i React Native. Med det kan ni rendera en komponent i en simulerad miljö, söka efter element i resultatet och göra assertioner om vad användaren skulle se.

RNTL följer Testing Library-filosofin: testa komponenter på samma sätt som användare interagerar med dem – genom synlig text, tillgänglighetsetiketter och roller – i stället för genom interna implementationdetaljer som komponentnamn eller state-värden. Det ger tester som klarar refaktorering bättre.

Installera React Native Testing Library

Installera RNTL och dess peer dependency @testing-library/jest-native för utökade matchers. Paketet jest-native lägger till React Native-specifika matchers som toBeVisible() och toHaveTextContent().

Lägg till setup-filen i Jest-konfigurationen så att matchers är tillgängliga i varje testfil utan manuella importer. Importera @testing-library/jest-native/extend-expect i Jest-setupfilen.

npm install --save-dev @testing-library/react-native @testing-library/jest-native

// jest.config.js — add setup file
module.exports = {
  preset: 'jest-expo',
  setupFilesAfterFramework: ['@testing-library/jest-native/extend-expect'],
};

// Or in package.json:
'jest': {
  'preset': 'jest-expo',
  'setupFilesAfterFramework': ['@testing-library/jest-native/extend-expect']
}

Rendera en komponent med render()

Funktionen render() från RNTL monterar en komponent och returnerar en uppsättning frågeverktyg för att inspektera det renderade resultatet. Den tar emot JSX på samma sätt som ni skulle skriva den i appen, inklusive props och eventuella omslutande providers som behövs.

Det returnerade objektet innehåller frågemetoder och funktionen debug(), som skriver ut det renderade komponentträdet i konsolen. Anropa debug() när som helst under ett test för att se hur komponenten ser ut just då.

import { render } from '@testing-library/react-native';
import { Greeting } from '../src/components/Greeting';

describe('Greeting', () => {
  it('displays the correct greeting message', () => {
    const { getByText, debug } = render(<Greeting name='Alice' />);

    // Print the component tree for debugging
    debug();

    // Assert that the text 'Hello, Alice!' is visible
    expect(getByText('Hello, Alice!')).toBeTruthy();
  });
});

Sök efter text med getByText

getByText(text) hittar ett element som visar den exakta textsträngen. Den kastar ett fel om inget matchande element hittas (vilket gör att testet misslyckas) eller om flera element matchar. Använd queryByText när ni vill kontrollera att texten inte finns (den returnerar null i stället för att kasta ett fel).

Ni kan också skicka ett reguljärt uttryck för att matcha delar av texten: getByText(/Hello/). Det är användbart när texten innehåller dynamiska värden, till exempel ett användarnamn som ni inte vill hårdkoda i testet.

import { render } from '@testing-library/react-native';
import { PostCard } from '../src/components/PostCard';

it('renders the post title and author', () => {
  const { getByText, queryByText } = render(
    <PostCard title='My First Post' author='Alice' isDeleted={false} />
  );

  // getByText throws if not found
  expect(getByText('My First Post')).toBeTruthy();
  expect(getByText('Alice')).toBeTruthy();

  // queryByText returns null if not found — use for absence checks
  expect(queryByText('Deleted')).toBeNull();
});

Sök efter testID

När det inte finns någon synlig text att söka efter kan ni lägga till en testID-prop på elementet och söka efter det med getByTestId('testID'). Det är användbart för ikoner, bilder, laddningsindikatorer och container-vyer.

Håll testID-värden konsekventa med komponenten de identifierar. En namnkonvention som componentName-element (t.ex. profileCard-avatar) gör test-ID:n självförklarande och förhindrar kollisioner i testsviten.

// Component:
export function LoadingScreen() {
  return (
    <View testID='loading-screen'>
      <ActivityIndicator testID='loading-spinner' />
      <Text>Loading your data...</Text>
    </View>
  );
}

// Test:
import { render } from '@testing-library/react-native';

it('shows a loading spinner', () => {
  const { getByTestId } = render(<LoadingScreen />);

  const spinner = getByTestId('loading-spinner');
  expect(spinner).toBeTruthy();
});

Tillgänglighetsfrågor

RNTL uppmuntrar till sökning med tillgänglighetsattribut, eftersom det är dessa skärmläsare använder. På så sätt verifierar testerna även tillgängligheten. De viktigaste tillgänglighetsfrågorna är:

getByRole('button', { name: 'Submit' }) – hittar ett element utifrån dess ARIA-roll och tillgängliga namn
getByLabelText('Email') – hittar ett element med matchande accessibilityLabel
getByPlaceholderText('Enter email') – hittar en TextInput utifrån dess platshållare

it('has an accessible submit button', () => {
  const { getByRole, getByLabelText, getByPlaceholderText } = render(
    <LoginForm />
  );

  // Find by role (button)
  const submitButton = getByRole('button', { name: 'Sign In' });
  expect(submitButton).toBeTruthy();

  // Find TextInput by placeholder
  const emailInput = getByPlaceholderText('Enter your email');
  expect(emailInput).toBeTruthy();

  // Find by accessibility label
  const passwordInput = getByLabelText('Password');
  expect(passwordInput).toBeTruthy();
});

Gör assertioner med jest-native-matchers

@testing-library/jest-native utökar Jest med semantiska matchers som är lättare att läsa och mer meningsfulla än att kontrollera råa props. Viktiga matchers är:

toBeVisible() – elementet är inte dolt
toHaveTextContent('text') – elementet innehåller den angivna texten
toBeDisabled() – knappen eller inmatningsfältet är inaktiverat
toHaveStyle({ color: 'red' }) – elementet har den angivna stilen

import { render } from '@testing-library/react-native';
import { StatusBadge } from '../src/components/StatusBadge';

it('shows an error badge in red when status is error', () => {
  const { getByTestId } = render(<StatusBadge status='error' />);

  const badge = getByTestId('status-badge');
  expect(badge).toBeVisible();
  expect(badge).toHaveTextContent('Error');
  expect(badge).toHaveStyle({ backgroundColor: '#ff4444' });
});

Rendera med providers

De flesta komponenter i verkliga projekt är beroende av context-providers som NavigationContainer, Redux Provider eller en egen ThemeContext. Om ni renderar en komponent utan de providers den behöver kommer testet att kasta ett fel.

Skapa ett eget verktyg, renderWithProviders, som omsluter komponenter med alla nödvändiga providers. Skicka verktyget till RNTL:s render-alternativ via wrapper, eller använd det som en direkt ersättning för render i hela testsviten.

// test-utils.tsx
import { NavigationContainer } from '@react-navigation/native';
import { ThemeProvider } from '../src/context/ThemeContext';

export function renderWithProviders(
  ui: React.ReactElement,
  options = {}
) {
  function Wrapper({ children }: { children: React.ReactNode }) {
    return (
      <NavigationContainer>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </NavigationContainer>
    );
  }
  return render(ui, { wrapper: Wrapper, ...options });
}

// In tests:
import { renderWithProviders } from '../test-utils';
const { getByText } = renderWithProviders(<ProfileScreen />);

Snapshot-tester

Snapshot-tester fångar det renderade resultatet av en komponent och sparar det i en .snap-fil. Vid efterföljande körningar jämför Jest det aktuella resultatet med den sparade snapshoten och låter testet misslyckas om de skiljer sig åt. Det fångar oavsiktliga ändringar i användargränssnittet.

Använd snapshots sparsamt. De passar bra för små, stabila komponenter som ikoner eller knappar. För komplexa skärmar tenderar snapshot-tester att bli sköra – även små, avsiktliga ändringar kräver att snapshoten uppdateras med jest --updateSnapshot, vilket gör det lätt att av misstag acceptera ett trasigt resultat.

import { render } from '@testing-library/react-native';
import { PrimaryButton } from '../src/components/PrimaryButton';

it('renders a primary button correctly', () => {
  const { toJSON } = render(<PrimaryButton title='Save' onPress={() => {}} />);
  expect(toJSON()).toMatchSnapshot();
});

// First run creates:
// __snapshots__/PrimaryButton.test.tsx.snap
// Subsequent runs compare against that snapshot

Testa villkorsstyrd rendering

Komponenter renderar ofta olika användargränssnitt beroende på props eller state. Testa varje villkorsgren uttryckligen genom att rendera komponenten med olika props och kontrollera att rätt element finns eller saknas.

Använd queryByText eller queryByTestId (som returnerar null i stället för att kasta ett fel) för att kontrollera att något saknas. Undvik att använda getBy-frågor för att kontrollera frånvaro – de kastar ett fel, vilket inte ger ett tydligt felmeddelande.

describe('ErrorBanner', () => {
  it('shows the error message when error prop is provided', () => {
    const { getByText } = render(
      <ErrorBanner error='Something went wrong' />
    );
    expect(getByText('Something went wrong')).toBeTruthy();
  });

  it('renders nothing when error is null', () => {
    const { queryByTestId } = render(<ErrorBanner error={null} />);
    // Assert the banner container is NOT rendered
    expect(queryByTestId('error-banner')).toBeNull();
  });
});

Varianterna getAllBy och findBy

RNTL:s frågefunktioner finns i tre varianter:

getBy – kastar ett fel om inget hittas eller om flera träffar hittas (använd för enstaka element som måste finnas)
getAllBy – returnerar en array och kastar ett fel om inget hittas (använd för listor med element)
findBy – returnerar ett Promise och väntar på att elementet ska visas (använd för asynkront innehåll)

Varianterna findBy är viktiga när ni testar komponenter som läser in data asynkront – de försöker automatiskt igen tills elementet visas eller en timeout överskrids.

// getAllBy: asserts there are exactly 3 list items
const items = getAllByTestId('list-item');
expect(items).toHaveLength(3);

// findBy: waits for async content to appear
it('shows posts after loading', async () => {
  const { findByText } = render(<PostFeed />);

  // Waits up to 1000ms for the text to appear
  const postTitle = await findByText('My First Post');
  expect(postTitle).toBeTruthy();
});

Snabbkontroll

Testa er förståelse av begreppen inom React Native Mobile Development från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har ni lärt er hur komponenter renderas med RNTL:s render()-funktion och hur element hittas med text, testID och tillgänglighetsattribut, hur jest-native-matchers som toBeVisible() och toHaveTextContent() gör assertioner mer lättlästa och hur komponenter omsluts med providers i tester som kräver navigerings- eller temakontext. Nästa steg är att utlösa användarhändelser och testa interaktivt komponentbeteende.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Rendera komponenter med React Native Testing Library” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Rendera komponenter med React Native Testing Library”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Rendera komponenter med React Native Testing Library”?

Använd render från @testing-library/react-native för att montera komponenter, söka efter element med text eller testID och kontrollera att det förväntade innehållet visas. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Native Academy?

Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Rendera komponenter med React Native Testing Library”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Native Academy-lektionen?

Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera Jest i ett React Native-projekt
Rendera komponenter med React Native Testing Library
Utlösa händelser och testa användarinteraktion
Mocka nativa moduler och asynkron kod

← Tillbaka till React Native Academy