How to Create Custom Tests in FlutterFlow

Run Mode (the play button, top-right in FlutterFlow) compiles your app in the browser using FlutterFlow's hosted runner. It renders your actual widgets, fires action flows, and shows real navigation. However, Firestore reads and writes in Run Mode connect to your LIVE Firebase project unless you have a separate test project configured. To test safely in Run Mode, use FlutterFlow's 'Test Data' feature: go to each Firestore collection, click the Test Data tab, and populate sample records. These appear in Run Mode queries without writing to production. Run Mode is best for visual layout checks, widget interactions, navigation flows, and action logic — not for push notifications, camera features, or deep device integrations.

Create a dedicated test environment before running Test Mode. Option A (recommended): create a second Firebase project named 'myapp-test' with its own Firestore database. In FlutterFlow Settings → Firebase → switch to the test project credentials for testing. Option B: in your existing project, prefix all test collection names with 'test_' (e.g., 'test_users', 'test_orders') and update your FlutterFlow queries to use the test collections during development. Option C: use Firestore Emulator Suite — run firebase emulators:start locally and point your test builds at localhost. Populate test Firestore with realistic but fake data: multiple user personas (new user, power user, admin), edge case records (empty lists, max-length strings, zero values), and error-triggering states.

Test Mode (the flask icon, next to Run Mode) runs against your real Firebase project with real Authentication and Firestore. Create a test checklist before starting. Test each critical user flow: new user registration, login with wrong password (verify error message), profile edit and save, creating and deleting records, all navigation paths, and empty state handling (what shows when a Firestore query returns zero results). Test each Action Flow by triggering it and verifying the Firestore write appears in the Firebase Console. Test conditional visibility — create test data that satisfies each condition and verify the correct elements appear. Log your test results as a simple checklist noting pass, fail, or not-tested for each flow.

Export your FlutterFlow project (Pro required) and open it in VS Code with Flutter SDK installed. For iOS testing: run flutter run -d <device-id> targeting a connected iPhone. For Android: connect an Android device with USB debugging enabled and run the same command. Physical device testing catches issues that Run Mode and Test Mode cannot: push notification delivery, camera and microphone permissions, GPS accuracy, biometric authentication, network behavior on slow connections, deep link handling, and performance on low-end hardware. Create a device-specific test checklist covering: app launch time, scrolling smoothness in long lists, camera open speed, push notification receipt, and app behavior when network connection drops mid-operation.

In your exported Flutter project, navigate to the test/ directory (created automatically). Write unit tests for Custom Functions that contain business logic. For example, test calculateProfileComplete() with various combinations of filled and empty fields, verifying the returned Double. Write widget tests for complex Custom Widgets to verify they render correctly and respond to props. Use flutter_test package (already a dev dependency in Flutter projects). Run tests with flutter test. For regression prevention, add a test for every bug you fix: write a test that reproduces the bug, verify it fails, fix the bug, verify the test passes. Commit both the fix and the test together.

1// test/custom_functions_test.dart
2import 'package:flutter_test/flutter_test.dart';
3// Import your custom function file
4
5void main() {
6  group('calculateProfileComplete', () {
7    test('returns 0.0 for completely empty profile', () {
8      final result = calculateProfileComplete(
9        '', '', '', [], null, '#6366F1',
10      );
11      expect(result, 0.0);
12    });
13    test('returns 1.0 for fully complete profile', () {
14      final result = calculateProfileComplete(
15        'John Doe',
16        'https://example.com/avatar.png',
17        'Flutter developer',
18        ['Tech', 'Design'],
19        {'website': 'https://example.com'},
20        '#FF5733',
21      );
22      expect(result, 1.0);
23    });
24    test('returns 0.5 for half-complete profile', () {
25      final result = calculateProfileComplete(
26        'Jane', 'https://example.com/img.png', '',
27        [], null, '#6366F1',
28      );
29      expect(result, closeTo(0.33, 0.01));
30    });
31  });
32}