[TEST] Fix: (Nested) null values will never be applied to SQLite when batched in Onyx

src/Expensify.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useStat
 import type {NativeEventSubscription} from 'react-native';
 import {AppState, Linking} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import Onyx, {withOnyx} from 'react-native-onyx';
+import Onyx, {Storage as OnyxStorage, withOnyx} from 'react-native-onyx';
 import ConfirmModal from './components/ConfirmModal';
 import DeeplinkWrapper from './components/DeeplinkWrapper';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
@@ -200,6 +200,70 @@ function Expensify({
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
     }, []);
 
+    useEffect(() => {
+        let connectId: number | undefined;
+
+        const initialData = {
+            a: 'a',
+            b: 'b',
+            c: {
+                d: 'd',
+                e: 'e',
+            },
+        };
+        const change1 = {
+            b: null,
+        };
+        const change2 = null;
+        const change3 = {
+            f: 'f',
+            c: {
+                g: 'g',
+                h: 'h',
+            },
+        };
+        const change4 = {
+            c: {
+                g: null,
+            },
+        };
+
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises, @lwc/lwc/no-async-await
+        setTimeout(async () => {
+            const testKey = 'test_key_1';
+
+            const printValueInSqlite = async () => {
+                const value = await OnyxStorage.getItem(testKey);
+
+                console.log(value);
+
+                return Promise.resolve();
+            };
+
+            await Onyx.set(testKey, initialData);
+            console.log('after set');
+            await printValueInSqlite();
+            Onyx.merge(testKey, change1);
+            console.log('after merge 1');
+            Onyx.merge(testKey, change2);
+            console.log('after merge 2');
+            Onyx.merge(testKey, change3);
+            console.log('after merge 3');
+            const promise = Onyx.merge(testKey, change4);
+            console.log('after merge 4');
+
+            await promise;
+            console.log('after await merge 4');
+            await printValueInSqlite();
+        }, 10000);
+
+        return () => {
+            if (connectId) {
+                Onyx.disconnect(connectId);
+            }
+        };
+    }, []);
+
     // Display a blank page until the onyx migration completes
     if (!isOnyxMigrated) {
         return null;