feat: Implement jest mocks for react-native.

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   transform: { '^.+\\.ts?$': 'ts-jest' },
   testMatch: ['**/__tests__/**/*test.ts?(x)'],
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverageFrom: [
     'packages/sdk/server-node/src/**/*.ts',

package.json

@@ -22,7 +22,8 @@
     "packages/store/node-server-sdk-redis",
     "packages/store/node-server-sdk-dynamodb",
     "packages/telemetry/node-server-sdk-otel",
-    "packages/tooling/jest"
+    "packages/tooling/jest",
+    "packages/tooling/jest/example/react-native-example"
   ],
   "private": true,
   "scripts": {

packages/tooling/jest/example/react-native-example/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# vscode
+.vscode

packages/tooling/jest/example/react-native-example/App.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+import { mockReactNativeLDClient } from '@launchdarkly/jest/react-native';
+import { LDProvider } from '@launchdarkly/react-native-client-sdk';
+
+import Welcome from './src/welcome';
+
+const featureClient = mockReactNativeLDClient();
+
+const userContext = { kind: 'user', key: '', anonymous: true };
+
+export default function App() {
+  featureClient.identify(userContext).catch((e: any) => console.log(e));
+
+  return (
+    <LDProvider client={featureClient}>
+      <Welcome />
+    </LDProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

packages/tooling/jest/example/react-native-example/app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "react-native-jest-example",
+    "slug": "react-native-jest-example",
+    "version": "0.0.1",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.reactnativejestexample"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.anonymous.reactnativejestexample"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

packages/tooling/jest/example/react-native-example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

packages/tooling/jest/example/react-native-example/index.js

@@ -0,0 +1,10 @@
+// We have to use a custom entrypoint for monorepo workspaces to work.
+// https://docs.expo.dev/guides/monorepos/#change-default-entrypoint
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

packages/tooling/jest/example/react-native-example/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFiles: ['@launchdarkly/jest/react-native'],
+};

packages/tooling/jest/example/react-native-example/metro.config.js

@@ -0,0 +1,28 @@
+// We need to use a custom metro config for monorepo workspaces to work.
+// https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
+/**
+ * @type {import('expo/metro-config')}
+ */
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+// Find the project and workspace directories
+const projectRoot = __dirname;
+
+const findWorkspaceRoot = require('find-yarn-workspace-root');
+
+const workspaceRoot = findWorkspaceRoot(__dirname); // Absolute path or null
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;

packages/tooling/jest/example/react-native-example/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-native-jest-example",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@launchdarkly/react-native-client-sdk": "workspace:^",
+    "expo": "~51.0.20",
+    "expo-status-bar": "~1.12.1",
+    "find-yarn-workspace-root": "^2.0.0",
+    "react": "18.2.0",
+    "react-native": "0.74.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@launchdarkly/jest": "workspace:^",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

packages/tooling/jest/example/react-native-example/src/welcome.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { mockFlags, mockUseLDClient } from '@launchdarkly/jest/react-native';
+
+export default function Welcome() {
+  const flagValue = mockFlags({ 'dev-test-flag': true });
+
+  const ldClient = mockUseLDClient();
+
+  ldClient.track('test');
+
+  return (
+    <View style={styles.container}>
+      <Text>Welcome to LaunchDarkly</Text>
+      <Text>Flag value is {`${flagValue}`}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

packages/tooling/jest/example/react-native-example/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx"
+  }
+}

packages/tooling/jest/jest.config.json

@@ -3,7 +3,7 @@
   "testMatch": ["**/*.test.ts?(x)"],
   "testPathIgnorePatterns": ["node_modules", "example", "dist"],
   "modulePathIgnorePatterns": ["dist"],
-  "testEnvironment": "node",
+  "testEnvironment": "jsdom",
   "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
   "collectCoverageFrom": ["src/**/*.ts"]
 }

packages/tooling/jest/package.json

@@ -59,5 +59,9 @@
     "ts-jest": "^29.1.0",
     "typedoc": "0.25.0",
     "typescript": "5.1.6"
+  },
+  "dependencies": {
+    "@launchdarkly/react-native-client-sdk": "workspace:^",
+    "@testing-library/react-hooks": "^8.0.1"
   }
 }

packages/tooling/jest/src/react-native/index.test.ts

@@ -1,3 +1,58 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import {
+  ldClientMock,
+  mockFlags,
+  mockLDProvider,
+  mockReactNativeLDClient,
+  mockUseLDClient,
+} from '.';
+
 describe('react-native', () => {
-  test.todo('Add react-native tests');
+  test('mock boolean flag correctly', () => {
+    mockFlags({ 'bool-flag': true });
+  });
+
+  test('mock number flag correctly', () => {
+    mockFlags({ 'number-flag': 42 });
+  });
+
+  test('mock string flag correctly', () => {
+    mockFlags({ 'string-flag': 'hello' });
+  });
+
+  test('mock json flag correctly', () => {
+    mockFlags({ 'json-flag': { key: 'value' } });
+  });
+
+  test('mock LDProvider correctly', () => {
+    expect(mockLDProvider).toBeDefined();
+  });
+
+  test('mock ReactNativeLDClient correctly', () => {
+    expect(mockReactNativeLDClient).toBeDefined();
+  });
+
+  test('mock ldClient correctly', () => {
+    const {
+      result: { current },
+    } = renderHook(() => mockUseLDClient());
+
+    current?.track('event');
+    expect(ldClientMock.track).toHaveBeenCalledTimes(1);
+  });
+
+  test('mock ldClient complete set of methods correctly', () => {
+    expect(ldClientMock.identify).toBeDefined();
+    expect(ldClientMock.allFlags.mock).toBeDefined();
+    expect(ldClientMock.close.mock).toBeDefined();
+    expect(ldClientMock.flush).toBeDefined();
+    expect(ldClientMock.getContext.mock).toBeDefined();
+    expect(ldClientMock.off.mock).toBeDefined();
+    expect(ldClientMock.on.mock).toBeDefined();
+    expect(ldClientMock.setConnectionMode.mock).toBeDefined();
+    expect(ldClientMock.track.mock).toBeDefined();
+    expect(ldClientMock.variation.mock).toBeDefined();
+    expect(ldClientMock.variationDetail.mock).toBeDefined();
+  });
 });

packages/tooling/jest/src/react-native/index.ts

@@ -1,3 +1,73 @@
-jest.mock('@launchdarkly/react-client-sdk', () => {
-  // TODO:
-});
+import {
+  LDFlagSet,
+  LDProvider,
+  ReactNativeLDClient,
+  useLDClient,
+} from '@launchdarkly/react-native-client-sdk';
+
+jest.mock('@launchdarkly/react-native-client-sdk', () => ({
+  LDProvider: jest.fn(),
+  ReactNativeLDClient: jest.fn(),
+  useLDClient: jest.fn(),
+}));
+
+const mockLDProvider = LDProvider as jest.Mock;
+const mockReactNativeLDClient = ReactNativeLDClient as jest.Mock;
+const mockUseLDClient = useLDClient as jest.Mock;
+
+export const ldClientMock = {
+  allFlags: jest.fn(),
+  boolVariation: jest.fn(),
+  boolVariationDetail: jest.fn(),
+  close: jest.fn(),
+  flush: jest.fn(() => Promise.resolve()),
+  getConnectionMode: jest.fn(),
+  getContext: jest.fn(),
+  identify: jest.fn(() => Promise.resolve()),
+  jsonVariation: jest.fn(),
+  jsonVariationDetail: jest.fn(),
+  logger: jest.fn(),
+  numberVariation: jest.fn(),
+  numberVariationDetail: jest.fn(),
+  off: jest.fn(),
+  on: jest.fn(),
+  setConnectionMode: jest.fn(),
+  stringVariation: jest.fn(),
+  stringVariationDetail: jest.fn(),
+  track: jest.fn(),
+  variation: jest.fn(),
+  variationDetail: jest.fn(),
+};
+
+mockLDProvider.mockImplementation((props: any) => props.children);
+mockUseLDClient.mockImplementation(() => ldClientMock);
+mockReactNativeLDClient.mockImplementation(() => ldClientMock);
+
+export { mockLDProvider, mockReactNativeLDClient, mockUseLDClient };
+
+export const mockFlags = (flags: LDFlagSet) => {
+  ldClientMock.boolVariation.mockImplementation((flagKey: string) => {
+    if (typeof flags[flagKey] !== 'boolean') {
+      throw new Error(`Flag ${flagKey} is not a boolean. Flag value, ${flags[flagKey]}`);
+    }
+    return flags[flagKey] as boolean;
+  });
+  ldClientMock.numberVariation.mockImplementation((flagKey: string) => {
+    if (typeof flags[flagKey] !== 'number') {
+      throw new Error(`Flag ${flagKey} is not a number. Flag value, ${flags[flagKey]}`);
+    }
+    return flags[flagKey] as number;
+  });
+  ldClientMock.stringVariation.mockImplementation((flagKey: string) => {
+    if (typeof flags[flagKey] !== 'string') {
+      throw new Error(`Flag ${flagKey} is not a string. Flag value, ${flags[flagKey]}`);
+    }
+    return flags[flagKey] as string;
+  });
+  ldClientMock.jsonVariation.mockImplementation((flagKey: string) => {
+    if (typeof flags[flagKey] !== 'object') {
+      throw new Error(`Flag ${flagKey} is not a JSON. Flag value, ${flags[flagKey]}`);
+    }
+    return flags[flagKey] as object;
+  });
+};