Integration Testing
Intermediate
Topic 9 of 15
Integration Testing
Integration testing verifies that multiple units, such as several components or a component combined with state management, work correctly together, bridging the gap between isolated unit tests and full end-to-end tests.
Unit vs Integration vs E2E Testing
Unit tests verify individual functions in isolation, integration tests verify multiple pieces working together within the app, and end-to-end tests verify complete user flows on a real running application.
Testing a Screen with Multiple Components
javascript
import { render, screen, fireEvent } from '@testing-library/react-native';
import LoginScreen from '../LoginScreen';
test('shows error message on invalid login', async () => {
render();
fireEvent.changeText(screen.getByPlaceholderText('Email'), 'invalid@test.com');
fireEvent.changeText(screen.getByPlaceholderText('Password'), 'wrongpassword');
fireEvent.press(screen.getByText('Login'));
expect(await screen.findByText('Invalid credentials')).toBeTruthy();
});
Testing Redux-Connected Components
javascript
import { Provider } from 'react-redux';
import { render } from '@testing-library/react-native';
function renderWithRedux(component, store) {
return render(
{component});
}
Testing Navigation Flows
javascript
import { NavigationContainer } from '@react-navigation/native';
render(
);
Mocking API Calls in Integration Tests
javascript
jest.mock('axios');
axios.get.mockResolvedValue({ data: mockUsers });
Conclusion
Integration tests provide confidence that different parts of your React Native application, such as screens, state management, and navigation, work correctly together, catching issues that isolated unit tests might miss.