Ontwerp een React Native App met Geautomatiseerde Teststrategieën voor Kwaliteitsborging
description
Met deze prompt kan de gebruiker een robuuste en efficiënte geautomatiseerde teststrategie ontwikkelen die helpt bugs te identificeren voordat ze in productie komen, de stabiliteit van de app verhoogt en de onderhoudbaarheid vereenvoudigt. Het is beter dan alternatieven omdat het een gestructureerde aanpak biedt met concrete aanbevelingen voor bewezen testtools en methodologieën, afgestemd op React Native.
prompt
Help me bij het opzetten van een geautomatiseerde teststrategie voor mijn React Native app. Beschrijf hoe ik unit tests, integratietests en end-to-end tests kan implementeren, inclusief aanbevelingen voor testbibliotheken zoals Jest, Detox of React Na ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een gestructureerde aanpak voor het opzetten van een geautomatiseerde teststrategie voor je React Native app, gericht op het testen van het login scherm met authenticatie en foutmeldingen, inclusief aanbevelingen voor testbibliotheken.
1. **Unit Tests**
- **Doel:** Test individuele functies, logica en componenten in isolatie.
- **Implementatie:**
- Gebruik **Jest**, de standaard testbibliotheek voor React Native.
- Test bijvoorbeeld:
- Validatie logica (bijvoorbeeld invoer van gebruikersnaam/wachtwoord).
- Helper functies voor authenticatie.
- React componenten zonder afhankelijkheid van externe services.
- **Aanbevelingen:**
- Mock API calls met `jest.mock()`.
- Gebruik **React Native Testing Library** (RNTL) voor het renderen en testen van componenten in isolatie.
- **Voorbeeld:**
```javascript
import { render, fireEvent } from '@testing-library/react-native';
import LoginScreen from '../LoginScreen';
test(' toont foutmelding bij lege invoer', () => {
const { getByText, getByPlaceholderText } = render(<LoginScreen />);
fireEvent.changeText(getByPlaceholderText('Gebruikersnaam'), '');
fireEvent.changeText(getByPlaceholderText('Wachtwoord'), '');
fireEvent.press(getByText('Inloggen'));
expect(getByText('Vul alle velden in')).toBeTruthy();
});
```
2. **Integratietests**
- **Doel:** Test de interactie tussen meerdere componenten en functies, zoals het loginproces inclusief API communicatie.
- **Implementatie:**
- Gebruik Jest en RNTL, met gemockte API calls.
- Test bijvoorbeeld de volledige login flow:
- Gebruiker vult gegevens in.
- API wordt aangeroepen en reageert (succes of fout).
- UI reageert correct.
- **Aanbevelingen:**
- Mock API-antwoorden met bijvoorbeeld **msw (Mock Service Worker)** of Jest mocks.
- Test de integratie tussen UI en logica.
- **Voorbeeld:**
```javascript
import { render, fireEvent, waitFor } from '@testing-library/react-native';
import LoginScreen from '../LoginScreen';
test(' succesvolle login toont home scherm', async () => {
// Mock API response
fetch.mockResponseOnce(JSON.stringify({ token: 'abc123' }));
const { getByPlaceholderText, getByText } = render(<LoginScreen />);
fireEvent.changeText(getByPlaceholderText('Gebruikersnaam'), 'testuser');
fireEvent.changeText(getByPlaceholderText('Wachtwoord'), 'password');
fireEvent.press(getByText('Inloggen'));
await waitFor(() => {
expect(getByText('Welkom')).toBeTruthy();
});
});
```
3. **End-to-End Tests (E2E)**
- **Doel:** Test de volledige app-ervaring op een echt apparaat of emulator, inclusief navigatie en integratie van backend.
- **Implementatie:**
- Gebruik **Detox**, een populaire E2E-testtool voor React Native.
- Schrijf tests die de gebruiker simuleren (bijv. inloggen, navigatie, foutmeldingen).
- **Aanbevelingen:**
- Automatiseer tests in CI/CD pipelines.
- Test verschillende scenario’s: succesvolle login, foutmeldingen, netwerkfouten.
- **Voorbeeld:**
```javascript
describe('Login Flow', () => {
beforeAll(async () => {
await device.launchApp();
});
it('succesvolle login', async () => {
await element(by.id('usernameInput')).typeText('testuser');
await element(by.id('passwordInput')).typeText('password');
await element(by.id('loginButton')).tap();
await expect(element(by.text('Welkom'))).toBeVisible();
});
it('foutmelding bij verkeerde gegevens', async () => {
await element(by.id('usernameInput')).replaceText('wronguser');
await element(by.id('passwordInput')).replaceText('wrongpass');
await element(by.id('loginButton')).tap();
await expect(element(by.text('Ongeldige inloggegevens'))).toBeVisible();
});
});
```
4. **Regressiepreventie en Teststrategie**
- Automatiseer alle tests in CI/CD pipelines.
- Voer unit- en integratietests uit bij elke codewijziging.
- Plan regelmatige E2E-tests, bijvoorbeeld na grote releases.
- Gebruik code coverage tools om te zorgen dat alle kritieke paden getest worden.
- Documenteer testscenario's en onderhoud testgevallen actueel.
**Samenvattend:**
- Gebruik **Jest** + **React Native Testing Library** voor unit- en integratietests.
- Gebruik **Detox** voor end-to-end tests op echte devices/emulators.
- Integreer alle tests in je CI/CD voor continue regressiebewaking.
- Focus op het testen van authenticatie, foutmeldingen en gebruikersinteracties om regressies te voorkomen.
Heeft u meer specifieke componenten of functies die u wilt testen?
provider: deepseek
model: deepseek-chat
Zeker! Hier is een gestructureerde teststrategie voor je React Native app, specifiek gericht op het Login scherm met authenticatie en foutmeldingen.
## 1. Testpiramide Structuur
**Unit Tests (Basis) → Integratie Tests (Midden) → E2E Tests (Top)**
## 2. Unit Tests - React Native Testing Library + Jest
### Setup
```bash
npm install --save-dev @testing-library/react-native @testing-library/jest-native jest
```
### Testvoorbeelden Login Component
```javascript
// LoginComponent.test.js
import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react-native';
import LoginScreen from './LoginScreen';
describe('Login Screen Unit Tests', () => {
test('render correcte login velden', () => {
const { getByPlaceholderText } = render(<LoginScreen />);
expect(getByPlaceholderText('E-mail')).toBeTruthy();
expect(getByPlaceholderText('Wachtwoord')).toBeTruthy();
});
test('toon foutmelding bij lege velden', async () => {
const { getByText, getByTestId } = render(<LoginScreen />);
fireEvent.press(getByTestId('login-button'));
await waitFor(() => {
expect(getByText('Vul alle velden in')).toBeTruthy();
});
});
test('valideer e-mail formaat', async () => {
const { getByPlaceholderText, getByText, getByTestId } = render(<LoginScreen />);
fireEvent.changeText(getByPlaceholderText('E-mail'), 'ongeldig-email');
fireEvent.press(getByTestId('login-button'));
await waitFor(() => {
expect(getByText('Voer een geldig e-mailadres in')).toBeTruthy();
});
});
});
```
## 3. Integratie Tests - React Native Testing Library
### Authenticatie Integratie Test
```javascript
// AuthIntegration.test.js
describe('Authenticatie Integratie', () => {
test('succesvolle login flow', async () => {
const mockLogin = jest.fn().mockResolvedValue({ success: true });
const { getByPlaceholderText, getByTestId } = render(
<LoginScreen onLogin={mockLogin} />
);
fireEvent.changeText(getByPlaceholderText('E-mail'), 'test@example.com');
fireEvent.changeText(getByPlaceholderText('Wachtwoord'), 'wachtwoord123');
fireEvent.press(getByTestId('login-button'));
await waitFor(() => {
expect(mockLogin).toHaveBeenCalledWith({
email: 'test@example.com',
password: 'wachtwoord123'
});
});
});
test('toon foutmelding bij failed login', async () => {
const mockLogin = jest.fn().mockRejectedValue(new Error('Invalid credentials'));
const { getByPlaceholderText, getByTestId, getByText } = render(
<LoginScreen onLogin={mockLogin} />
);
// Vul gegevens in en probeer te login
fireEvent.changeText(getByPlaceholderText('E-mail'), 'test@example.com');
fireEvent.changeText(getByPlaceholderText('Wachtwoord'), 'foutwachtwoord');
fireEvent.press(getByTestId('login-button'));
await waitFor(() => {
expect(getByText('Ongeldige inloggegevens')).toBeTruthy();
});
});
});
```
## 4. End-to-End Tests - Detox
### Setup Detox
```bash
npm install --save-dev detox
# Voor iOS
brew tap wix/brew
brew install applesimutils
```
### Detox Configuratie
```javascript
// .detoxrc.json
{
"testRunner": "jest",
"runnerConfig": "e2e/config.json",
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/YourApp.app",
"build": "xcodebuild -workspace ios/YourApp.xcworkspace -scheme YourApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"device": {
"type": "iPhone 15"
}
}
}
}
```
### E2E Test Voorbeelden
```javascript
// e2e/loginFlow.test.js
describe('Login Flow E2E', () => {
beforeAll(async () => {
await device.launchApp();
});
beforeEach(async () => {
await device.reloadReactNative();
});
it('should show login screen', async () => {
await expect(element(by.id('login-screen'))).toBeVisible();
});
it('should login successfully with valid credentials', async () => {
await element(by.id('email-input')).typeText('test@example.com');
await element(by.id('password-input')).typeText('correctpassword');
await element(by.id('login-button')).tap();
await waitFor(element(by.id('home-screen'))).toBeVisible().withTimeout(5000);
});
it('should show error message with invalid credentials', async () => {
await element(by.id('email-input')).typeText('test@example.com');
await element(by.id('password-input')).typeText('wrongpassword');
await element(by.id('login-button')).tap();
await expect(element(by.text('Ongeldige inloggegevens'))).toBeVisible();
});
it('should handle network errors gracefully', async () => {
// Simuleer offline scenario
await device.setURLBlacklist(['.*auth.*']);
await element(by.id('email-input')).typeText('test@example.com');
await element(by.id('password-input')).typeText('password123');
await element(by.id('login-button')).tap();
await expect(element(by.text('Netwerkfout, probeer opnieuw'))).toBeVisible();
});
});
```
## 5. Test Strategie Implementatie
### Package.json Scripts
```json
{
"scripts": {
"test:unit": "jest --testPathIgnorePatterns=\".*/e2e/.*\"",
"test:integration": "jest --testPathPattern=\"integration\"",
"test:e2e:ios": "detox test -c ios.sim.debug",
"test:e2e:build:ios": "detox build -c ios.sim.debug",
"test:all": "npm run test:unit && npm run test:integration"
}
}
```
### CI/CD Integratie
```yaml
# .github/workflows/test.yml
name: Test Suite
on: [push, pull_request]
jobs:
test:
runs-on: macos-latest
steps:
- uses: actions/checkout@v2
- name: Install dependencies
run: npm ci
- name: Run Unit Tests
run: npm run test:unit
- name: Run Integration Tests
run: npm run test:integration
- name: Build for E2E Tests
run: npm run test:e2e:build:ios
- name: Run E2E Tests
run: npm run test:e2e:ios
```
## 6. Aanbevolen Test Verdeling
- **70% Unit Tests**: Individuele componenten, helper functions, validatie
- **20% Integratie Tests**: Component interacties, API calls, navigatie
- **10% E2E Tests**: Kritieke gebruikersflows zoals login
## 7. Regressie Preventie Tips
1. **Run tests voor elke PR** naar main branch
2. **E2E tests in CI pipeline** voor kritieke flows
3. **Snapshot testing** voor UI componenten
4. **Test coverage reporting** (streef naar 80%+ voor business logic)
5. **Mock externe dependencies** consistent
Deze strategie zorgt voor een robuuste testdekking die regressies effectief voorkomt na nieuwe releases!