chore: added test for useRiveFile

Author: mfazekas

example/package.json

@@ -10,6 +10,7 @@
     "build:ios": "react-native build-ios --mode Debug"
   },
   "dependencies": {
+    "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/native": "^7.1.9",
     "@react-navigation/stack": "^7.3.2",
     "react": "19.0.0",

jest-setup.js

@@ -0,0 +1,11 @@
+/* global jest */
+jest.mock('react-native-nitro-modules', () => ({
+  NitroModules: {
+    createHybridObject: jest.fn(),
+  },
+  getHostComponent: jest.fn(() => 'RiveView'),
+}));
+
+jest.mock('./nitrogen/generated/shared/json/RiveViewConfig.json', () => ({}), {
+  virtual: true,
+});

package.json

@@ -75,6 +75,8 @@
     "@react-native/babel-preset": "0.79.2",
     "@react-native/eslint-config": "^0.78.0",
     "@release-it/conventional-changelog": "^9.0.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.0",
     "commitlint": "^19.6.1",
@@ -89,6 +91,7 @@
     "react-native": "0.79.2",
     "react-native-builder-bob": "^0.40.10",
     "react-native-nitro-modules": "^0.31.3",
+    "react-test-renderer": "19.0.0",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
     "typescript": "^5.2.2"
@@ -104,10 +107,18 @@
   "packageManager": "yarn@3.6.1",
   "jest": {
     "preset": "react-native",
+    "setupFilesAfterEnv": ["<rootDir>/jest-setup.js"],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^../nitrogen/generated/shared/json/RiveViewConfig\\.json$": "<rootDir>/jest-setup.js"
+    }
   },
   "commitlint": {
     "extends": [

src/hooks/__tests__/useRiveFile.test.ts

@@ -0,0 +1,119 @@
+import { renderHook, waitFor } from '@testing-library/react-native';
+import { useRiveFile } from '../useRiveFile';
+import type { RiveFile } from '../../specs/RiveFile.nitro';
+
+jest.mock('react-native/Libraries/Image/Image', () => ({
+  resolveAssetSource: jest.fn((source: number) => ({
+    uri: `asset://resolved/${source}`,
+  })),
+}));
+
+describe('useRiveFile - updateReferencedAssets', () => {
+  const mockRiveFile: RiveFile = {
+    release: jest.fn(),
+    updateReferencedAssets: jest.fn(),
+    viewModelCount: 0,
+    viewModelByIndex: jest.fn(),
+    viewModelByName: jest.fn(),
+    defaultArtboardViewModel: jest.fn(),
+  } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (global as any).mockRiveFileFactory.fromURL.mockResolvedValue(mockRiveFile);
+    (global as any).mockRiveFileFactory.fromResource.mockResolvedValue(
+      mockRiveFile
+    );
+  });
+
+  it('should call updateReferencedAssets when referencedAssets change', async () => {
+    const initialAssets = {
+      'asset-1': { source: { uri: 'https://example.com/image1.png' } },
+    };
+
+    const { result, rerender } = renderHook(
+      (props: { referencedAssets: any }) =>
+        useRiveFile('https://example.com/animation.riv', {
+          referencedAssets: props.referencedAssets,
+        }),
+      { initialProps: { referencedAssets: initialAssets } }
+    );
+
+    await waitFor(() => {
+      expect((result.current as any).isLoading).toBe(false);
+    });
+
+    expect(mockRiveFile.updateReferencedAssets).not.toHaveBeenCalled();
+
+    const updatedAssets = {
+      'asset-1': { source: { uri: 'https://example.com/image2.png' } },
+    };
+
+    rerender({ referencedAssets: updatedAssets });
+
+    await waitFor(() => {
+      expect(mockRiveFile.updateReferencedAssets).toHaveBeenCalledWith({
+        data: {
+          'asset-1': { sourceUrl: 'https://example.com/image2.png' },
+        },
+      });
+    });
+  });
+
+  it('should handle multiple asset changes', async () => {
+    const initialAssets = {
+      'asset-1': { source: { uri: 'https://example.com/image1.png' } },
+      'asset-2': { source: { uri: 'https://example.com/image2.png' } },
+    };
+
+    const { result, rerender } = renderHook(
+      (props: { referencedAssets: any }) =>
+        useRiveFile('https://example.com/animation.riv', {
+          referencedAssets: props.referencedAssets,
+        }),
+      { initialProps: { referencedAssets: initialAssets } }
+    );
+
+    await waitFor(() => {
+      expect((result.current as any).isLoading).toBe(false);
+    });
+
+    const updatedAssets = {
+      'asset-1': { source: { uri: 'https://example.com/image1-new.png' } },
+      'asset-2': { source: { uri: 'https://example.com/image2-new.png' } },
+    };
+
+    rerender({ referencedAssets: updatedAssets });
+
+    await waitFor(() => {
+      expect(mockRiveFile.updateReferencedAssets).toHaveBeenCalledWith({
+        data: {
+          'asset-1': { sourceUrl: 'https://example.com/image1-new.png' },
+          'asset-2': { sourceUrl: 'https://example.com/image2-new.png' },
+        },
+      });
+    });
+  });
+
+  it('should not call updateReferencedAssets if assets have not changed', async () => {
+    const assets = {
+      'asset-1': { source: { uri: 'https://example.com/image1.png' } },
+    };
+
+    const { result, rerender } = renderHook(
+      (props: { referencedAssets: any }) =>
+        useRiveFile('https://example.com/animation.riv', {
+          referencedAssets: props.referencedAssets,
+        }),
+      { initialProps: { referencedAssets: assets } }
+    );
+
+    await waitFor(() => {
+      expect((result.current as any).isLoading).toBe(false);
+    });
+
+    rerender({ referencedAssets: assets });
+
+    expect(mockRiveFile.updateReferencedAssets).not.toHaveBeenCalled();
+  });
+});

src/hooks/useRiveFile.ts

@@ -153,13 +153,15 @@ export function useRiveFile(
     };
   }, [input]);
 
-  if (initialReferencedAssets.current !== referencedAssets) {
-    // TODO: if riveFile not yet loaded?!
-    const { riveFile } = result;
-    if (riveFile && referencedAssets) {
-      riveFile.updateReferencedAssets(referencedAssets);
+  const { riveFile } = result;
+  useEffect(() => {
+    if (initialReferencedAssets.current !== referencedAssets) {
+      if (riveFile && referencedAssets) {
+        riveFile.updateReferencedAssets({ data: referencedAssets });
+        initialReferencedAssets.current = referencedAssets;
+      }
     }
-  }
+  }, [referencedAssets, riveFile]);
 
   if (initialInput.current !== input) {
     console.warn(