feat: Implement jest mocks for react-native. (#535)

**Requirements**

- [x] I have added test coverage for new or changed functionality
- [x] I have followed the repository's [pull request submission
guidelines](../blob/main/CONTRIBUTING.md#submitting-pull-requests)
- [x] I have validated my changes against all supported platform
versions

**Related issues**

Provide links to any issues in this repository or elsewhere relating to
this pull request.

**Describe the solution you've provided**

Provide a clear and concise description of what you expect to happen.

**Describe alternatives you've considered**

Provide a clear and concise description of any alternative solutions or
features you've considered.

**Additional context**

Add any other context about the pull request here.

---------

Co-authored-by: “Menelik <“[email protected]”>
Co-authored-by: Ryan Lamb <[email protected]>

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,6 +22,7 @@
     "packages/store/node-server-sdk-dynamodb",
     "packages/telemetry/node-server-sdk-otel",
     "packages/tooling/jest",
+    "packages/tooling/jest/example/react-native-example",
     "packages/sdk/browser",
     "packages/sdk/browser/contract-tests/entity",
     "packages/sdk/browser/contract-tests/adapter"

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,36 @@
+import { StyleSheet } from 'react-native';
+import {
+  AutoEnvAttributes,
+  LDProvider,
+  ReactNativeLDClient,
+  LDOptions,
+} from '@launchdarkly/react-native-client-sdk';
+import Welcome from './src/welcome';
+
+const options: LDOptions = {
+  debug: true,
+}
+//TODO Set MOBILE_KEY in .env file to a mobile key in your project/environment.
+const MOBILE_KEY = 'YOUR_MOBILE_KEY';
+const featureClient = new ReactNativeLDClient(MOBILE_KEY, AutoEnvAttributes.Enabled, options);
+
+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,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo', '@babel/preset-typescript'],
+
+  };
+};

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,4 @@
+module.exports = {
+  preset: 'jest-expo',
+  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,40 @@
+{
+  "name": "react-native-jest-example",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "test": "jest",
+    "clean": "rm -rf node_modules && rm -rf package-lock.json && rm -rf yarn.lock"
+  },
+  "dependencies": {
+    "@launchdarkly/react-native-client-sdk": "^10.9.0",
+    "expo": "^51.0.26",
+    "expo-status-bar": "~1.12.1",
+    "find-yarn-workspace-root": "^2.0.0",
+    "react": "^18.2.0",
+    "react-native": "0.74.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/runtime": "^7.25.4",
+    "@launchdarkly/jest": "workspace:^",
+    "@react-native/babel-preset": "^0.75.2",
+    "@testing-library/react-native": "^12.6.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.2.45",
+    "jest": "^29.7.0",
+    "jest-expo": "^51.0.4",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^5.1.3"
+  },
+  "packageManager": "[email protected]",
+  "installConfig": {
+    "hoistingLimits": "workspaces"
+  },
+  "private": true
+}

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

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mockFlags, resetLDMocks } from '@launchdarkly/jest/react-native';
+import { screen, render } from '@testing-library/react-native';
+import { useLDClient } from '@launchdarkly/react-native-client-sdk';
+import Welcome from './welcome';
+
+describe('Welcome component test', () => {
+
+    afterEach(() => {
+      resetLDMocks();
+    });
+
+    test('mock boolean flag correctly', () => {
+      mockFlags({ 'my-boolean-flag': true });
+      render(<Welcome />);
+      expect(screen.getByText('Flag value is true')).toBeTruthy();
+    });
+
+    test('mock ldClient correctly', () => {
+      const current = useLDClient();
+
+      current?.track('event');
+      expect(current.track).toHaveBeenCalledTimes(1);
+    });
+
+});

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

@@ -0,0 +1,25 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { useLDClient } from '@launchdarkly/react-native-client-sdk';
+
+export default function Welcome() {
+
+  const ldClient = useLDClient();
+
+  const flagValue = ldClient.boolVariation('my-boolean-flag', false);
+
+  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.eslint.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.json",
+    "include": [
+        "/**/*.ts", 
+        "/**/*.tsx",
+        "/*.js",
+        "/*.tsx"
+    ],
+    "exclude": ["node_modules"]
+}

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

@@ -55,9 +55,18 @@
     "eslint-plugin-prettier": "^5.0.0",
     "jest": "^29.5.0",
     "prettier": "^3.0.0",
+    "react-test-renderer": "^18.3.1",
     "rimraf": "^5.0.1",
     "ts-jest": "^29.1.0",
     "typedoc": "0.25.0",
     "typescript": "5.1.6"
+  },
+  "dependencies": {
+    "@launchdarkly/react-native-client-sdk": "~10.9.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^12.7.2",
+    "@types/lodash": "^4.17.7",
+    "launchdarkly-react-client-sdk": "^3.4.0",
+    "react": "^18.3.1"
   }
 }

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

@@ -1,3 +1,72 @@
+import {
+  ldClientMock,
+  mockFlags,
+  mockLDProvider,
+  mockReactNativeLDClient,
+  mockUseLDClient,
+  resetLDMocks,
+} from '.';
+
 describe('react-native', () => {
-  test.todo('Add react-native tests');
+  afterEach(() => {
+    resetLDMocks();
+  });
+
+  test('reset LD Mocks', () => {
+    const current = mockUseLDClient();
+
+    current?.track('event');
+    expect(ldClientMock.track).toHaveBeenCalledTimes(1);
+
+    resetLDMocks();
+    expect(ldClientMock.track).toHaveBeenCalledTimes(0);
+  });
+
+  test('mock boolean flag correctly', () => {
+    mockFlags({ 'bool-flag': true });
+    expect(ldClientMock.boolVariation).toBeDefined();
+  });
+
+  test('mock number flag correctly', () => {
+    mockFlags({ 'number-flag': 42 });
+    expect(ldClientMock.numberVariation).toBeDefined();
+  });
+
+  test('mock string flag correctly', () => {
+    mockFlags({ 'string-flag': 'hello' });
+    expect(ldClientMock.stringVariation).toBeDefined();
+  });
+
+  test('mock json flag correctly', () => {
+    mockFlags({ 'json-flag': { key: 'value' } });
+    expect(ldClientMock.jsonVariation).toBeDefined();
+  });
+
+  test('mock LDProvider correctly', () => {
+    expect(mockLDProvider).toBeDefined();
+  });
+
+  test('mock ReactNativeLDClient correctly', () => {
+    expect(mockReactNativeLDClient).toBeDefined();
+  });
+
+  test('mock ldClient correctly', () => {
+    const current = 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.track.mock).toBeDefined();
+    expect(ldClientMock.variation.mock).toBeDefined();
+    expect(ldClientMock.variationDetail.mock).toBeDefined();
+  });
 });