chore(tests): resolve duplicate react-native instances in harness tests (#123)

## Summary
- Fix Metro config to resolve duplicate react-native instances causing
`require()` to fail in harness tests
- Extract `withSingleReactNative` helper to `example/metro.helpers.js`
for reuse
- Simplify test architecture: tests defined in `__tests__/*.harness.ts`
with `describe`/`it`
- TestsPage uses `require.context` + `getTestCollector().collect()` to
run same tests in-app

## Test plan
- [x] `yarn typecheck` passes
- [x] `yarn test:harness:ios` passes (4 tests)
- [x] In-app TestsPage loads and runs tests

Author: mfazekas

example/__tests__/rive.harness.ts

@@ -1,26 +1,65 @@
-import { describe, it, beforeAll } from 'react-native-harness';
+import { describe, it, expect } from 'react-native-harness';
 import { RiveFileFactory } from '@rive-app/react-native';
-import type { RiveFile } from '@rive-app/react-native';
-import {
-  testViewModelBasicFunctionality,
-  testReplaceViewModelSharesState,
-} from '../src/testing/suites/viewModelTests';
 
-const ASSET_URL =
-  'http://localhost:8081/assets/assets/rive/viewmodelproperty.riv';
+const QUICK_START = require('../assets/rive/quick_start.riv');
+const VIEWMODEL = require('../assets/rive/viewmodelproperty.riv');
 
-describe('ViewModel', () => {
-  let file: RiveFile;
+describe('RiveFile Loading', () => {
+  it('fromSource with require() works', async () => {
+    const file = await RiveFileFactory.fromSource(QUICK_START, undefined);
+    expect(file).toBeDefined();
+    expect(file.artboardNames).toContain('health_bar_v01');
+  });
 
-  beforeAll(async () => {
-    file = await RiveFileFactory.fromURL(ASSET_URL, undefined);
+  it('fromURL works', async () => {
+    const file = await RiveFileFactory.fromURL(
+      'http://localhost:8081/assets/assets/rive/viewmodelproperty.riv',
+      undefined
+    );
+    expect(file).toBeDefined();
+    expect(file.artboardNames.length).toBeGreaterThan(0);
   });
+});
+
+describe('ViewModel', () => {
+  it('viewModel() basic functionality', async () => {
+    const file = await RiveFileFactory.fromSource(VIEWMODEL, undefined);
+    const vm = file.defaultArtboardViewModel();
+    expect(vm).toBeDefined();
+
+    const instance = vm?.createDefaultInstance();
+    expect(instance).toBeDefined();
 
-  it('viewModel() basic functionality', () => {
-    testViewModelBasicFunctionality(file);
+    const vm1 = instance?.viewModel('vm1');
+    const vm2 = instance?.viewModel('vm2');
+    expect(vm1).toBeDefined();
+    expect(vm2).toBeDefined();
+
+    expect(instance?.viewModel('nonexistent')).toBeUndefined();
+
+    expect(vm1?.instanceName).toBeDefined();
+    expect(typeof vm1?.instanceName).toBe('string');
+    expect(vm1?.stringProperty('name')).toBeDefined();
   });
 
-  it('replaceViewModel() replaces and shares state', () => {
-    testReplaceViewModelSharesState(file);
+  it('replaceViewModel() replaces and shares state', async () => {
+    const file = await RiveFileFactory.fromSource(VIEWMODEL, undefined);
+    const vm = file.defaultArtboardViewModel();
+    const instance = vm?.createDefaultInstance();
+    expect(instance).toBeDefined();
+
+    const vm2Instance = instance?.viewModel('vm2');
+    expect(vm2Instance).toBeDefined();
+
+    const vm2NameProp = vm2Instance?.stringProperty('name');
+    expect(vm2NameProp).toBeDefined();
+    const testValue = `test-${Date.now()}`;
+    vm2NameProp!.value = testValue;
+
+    instance?.replaceViewModel('vm1', vm2Instance!);
+
+    const vm1AfterReplace = instance?.viewModel('vm1');
+    const vm1NameProp = vm1AfterReplace?.stringProperty('name');
+    expect(vm1NameProp?.value).toBe(testValue);
   });
 });

example/babel.config.js

@@ -8,6 +8,7 @@ module.exports = getConfig(
   {
     presets: ['module:@react-native/babel-preset'],
     plugins: [
+      '@babel/plugin-transform-class-static-block',
       ['babel-plugin-react-compiler', {}],
       'react-native-reanimated/plugin',
     ],

example/metro.config.js

@@ -2,21 +2,23 @@ const path = require('path');
 const { getDefaultConfig } = require('@react-native/metro-config');
 const { getConfig } = require('react-native-builder-bob/metro-config');
 const { withRnHarness } = require('react-native-harness/metro');
+const { withSingleReactNative } = require('./metro.helpers');
 
 const root = path.resolve(__dirname, '..');
 
 const config = getDefaultConfig(__dirname);
 config.resolver.assetExts = [...config.resolver.assetExts, 'riv'];
 config.transformer.unstable_allowRequireContext = true;
+
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
  *
  * @type {import('metro-config').MetroConfig}
  */
-module.exports = withRnHarness(
-  getConfig(config, {
-    root,
-    project: __dirname,
-  })
-);
+const finalConfig = getConfig(config, {
+  root,
+  project: __dirname,
+});
+
+module.exports = withRnHarness(withSingleReactNative(finalConfig, __dirname));

example/metro.helpers.js

@@ -0,0 +1,33 @@
+const path = require('path');
+
+/**
+ * Forces all react-native imports to resolve to a single instance from the project's node_modules.
+ * Both the library (root) and example apps have their own react-native in node_modules.
+ * Without this, Metro may resolve react-native from the library's node_modules, causing duplicate instances.
+ *
+ * @param {import('metro-config').MetroConfig} config - Metro configuration
+ * @param {string} projectDir - Directory containing node_modules with react-native
+ * @returns {import('metro-config').MetroConfig}
+ */
+function withSingleReactNative(config, projectDir) {
+  const rnPath = path.join(projectDir, 'node_modules/react-native/index.js');
+  const originalResolveRequest = config.resolver.resolveRequest;
+  const defaultResolve = (context, moduleName, platform) =>
+    context.resolveRequest(context, moduleName, platform);
+  const resolveRequest = originalResolveRequest ?? defaultResolve;
+
+  return {
+    ...config,
+    resolver: {
+      ...config.resolver,
+      resolveRequest: (context, moduleName, platform) => {
+        if (moduleName === 'react-native') {
+          return { type: 'sourceFile', filePath: rnPath };
+        }
+        return resolveRequest(context, moduleName, platform);
+      },
+    },
+  };
+}
+
+module.exports = { withSingleReactNative };

example/src/pages/TestsPage.tsx

@@ -6,61 +6,47 @@ import {
   TouchableOpacity,
   ActivityIndicator,
 } from 'react-native';
+import { getTestCollector } from 'react-native-harness';
+import type { TestSuite, TestCase } from '@react-native-harness/bridge';
 import { useState, useEffect } from 'react';
-import { RiveFileFactory } from '@rive-app/react-native';
 import type { Metadata } from '../helpers/metadata';
-import type { TestCase, TestResult, TestStatus } from '../testing';
-import { allSuites } from '../testing/suites';
 
-interface LoadedSuite {
-  name: string;
-  tests: TestCase[];
-}
+const testContext = require.context('../../__tests__', false, /\.harness\.ts$/);
+
+type TestStatus = 'pending' | 'running' | 'passed' | 'failed';
 
 interface TestState {
   status: TestStatus;
   error?: string;
 }
 
 export default function TestsPage() {
+  const [suites, setSuites] = useState<TestSuite[]>([]);
   const [loading, setLoading] = useState(true);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [suites, setSuites] = useState<LoadedSuite[]>([]);
   const [testStates, setTestStates] = useState<Map<string, TestState>>(
     new Map()
   );
   const [runningAll, setRunningAll] = useState(false);
 
   useEffect(() => {
-    async function loadSuites() {
-      try {
-        const loaded: LoadedSuite[] = [];
+    async function collectTests() {
+      const collector = getTestCollector();
+      const result = await collector.collect(() => {
+        testContext.keys().forEach((key) => testContext(key));
+      }, 'harness-tests');
 
-        for (const suite of allSuites) {
-          const file = await RiveFileFactory.fromSource(
-            suite.riveAsset,
-            undefined
-          );
-          const tests = suite.getTests(file);
-          loaded.push({ name: suite.name, tests });
+      setSuites(result.testSuite.suites);
 
-          const initialStates = new Map<string, TestState>();
-          for (const test of tests) {
-            initialStates.set(getTestKey(suite.name, test.name), {
-              status: 'pending',
-            });
-          }
-          setTestStates((prev) => new Map([...prev, ...initialStates]));
+      const states = new Map<string, TestState>();
+      for (const suite of result.testSuite.suites) {
+        for (const test of suite.tests) {
+          states.set(`${suite.name}::${test.name}`, { status: 'pending' });
         }
-
-        setSuites(loaded);
-        setLoading(false);
-      } catch (e) {
-        setLoadError(e instanceof Error ? e.message : String(e));
-        setLoading(false);
       }
+      setTestStates(states);
+      setLoading(false);
     }
-    loadSuites();
+    collectTests();
   }, []);
 
   function getTestKey(suiteName: string, testName: string): string {
@@ -72,13 +58,8 @@ export default function TestsPage() {
     setTestStates((prev) => new Map(prev).set(key, { status: 'running' }));
 
     try {
-      const result: TestResult = await test.run();
-      setTestStates((prev) =>
-        new Map(prev).set(key, {
-          status: result.status,
-          error: result.error,
-        })
-      );
+      await test.fn();
+      setTestStates((prev) => new Map(prev).set(key, { status: 'passed' }));
     } catch (e) {
       setTestStates((prev) =>
         new Map(prev).set(key, {
@@ -131,16 +112,7 @@ export default function TestsPage() {
     return (
       <View style={styles.centered}>
         <ActivityIndicator size="large" color="#007AFF" />
-        <Text style={styles.loadingText}>Loading test suites...</Text>
-      </View>
-    );
-  }
-
-  if (loadError) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load tests:</Text>
-        <Text style={styles.errorDetail}>{loadError}</Text>
+        <Text style={styles.loadingText}>Collecting tests...</Text>
       </View>
     );
   }
@@ -224,24 +196,12 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 20,
   },
   loadingText: {
     marginTop: 10,
     fontSize: 16,
     color: '#666',
   },
-  errorText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#FF3B30',
-    marginBottom: 8,
-  },
-  errorDetail: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-  },
   header: {
     padding: 16,
     borderBottomWidth: 1,