Mobile test suite

apps/mobile/__mocks__/mixpanel-react-native.js

@@ -0,0 +1,5 @@
+module.exports = {
+  MixpanelReactNative: {
+    track: jest.fn(),
+  },
+};

apps/mobile/babel.config.js

@@ -1,7 +1,7 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
     plugins: [
       'react-native-reanimated/plugin',
       'nativewind/babel',

apps/mobile/jest.config.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { pathsToModuleNameMapper } = require('ts-jest');
+const {
+  compilerOptions: { paths },
+} = require('./tsconfig.json');
+
+const modulesToTranspile = [
+  '@react-native',
+  'react-native',
+  'mixpanel-react-native',
+  'expo-constants',
+  'expo-modules-core',
+];
+
+module.exports = {
+  preset: 'react-native',
+  setupFiles: ['<rootDir>/src/tests/setupFile.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/tests/setupFileAfterEnv.js'],
+  transformIgnorePatterns: [`node_modules/(?!(${modulesToTranspile.join('|')})/)`],
+  transform: {
+    '\\.js$': [
+      'babel-jest',
+      { presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript'] },
+    ],
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.tsx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleDirectories: ['<rootDir>/node_modules', '../../node_modules'],
+  moduleNameMapper: {
+    // Ensure all ouf our aliases from tsconfig work in jext
+    ...pathsToModuleNameMapper(paths, { prefix: '<rootDir>/' }),
+  },
+};

apps/mobile/package.json

@@ -75,20 +75,31 @@
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-transform-flow-strip-types": "^7.22.5",
     "@moonrepo/cli": "^1.6.0",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.3.0",
+    "@types/jest": "^29.5.5",
     "@types/lodash.merge": "^4.6.7",
     "@types/markdown-it": "^12.2.3",
     "@types/react-native": "^0.71.1",
+    "@types/relay-test-utils": "^6.0.5",
+    "babel-jest": "^29.7.0",
     "babel-plugin-relay": "^14.1.0",
     "babel-plugin-tsconfig-paths-module-resolver": "^1.0.4",
     "eas-cli": "^3.7.2",
+    "jest": "^29.7.0",
+    "jest-react-native": "^18.0.0",
+    "react-test-renderer": "18.2.0",
     "relay-compiler": "^14.1.0",
-    "tailwindcss": "^3.2.7"
+    "relay-test-utils": "^13.2.0",
+    "tailwindcss": "^3.2.7",
+    "ts-jest": "^29.1.1"
   },
   "private": true,
   "scripts": {
     "eas-build-post-install": "node_modules/.bin/moon run mobile:relay-codegen",
     "start": "expo start --dev-client",
     "android": "expo run:android",
-    "ios": "expo run:ios"
+    "ios": "expo run:ios",
+    "test": "jest"
   }
 }

apps/mobile/src/components/Button.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react-native';
+import React from 'react';
+
+import { AppTestContext } from '~/tests/AppTestContext';
+
+import { Button } from './Button';
+
+describe('Button', () => {
+  test('renders correctly', () => {
+    const { getByText } = render(
+      <AppTestContext>
+        <Button text="yolo" eventElementId={null} eventName={null} />
+      </AppTestContext>
+    );
+    expect(getByText('yolo')).toBeTruthy();
+  });
+});

apps/mobile/src/tests/AppTestContext.tsx

@@ -0,0 +1,18 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { PropsWithChildren, useState } from 'react';
+import { RelayEnvironmentProvider } from 'react-relay';
+
+import { MobileAnalyticsProvider } from '~/contexts/MobileAnalyticsProvider';
+import { createRelayEnvironment } from '~/contexts/relay/RelayProvider';
+
+export function AppTestContext({ children }: PropsWithChildren) {
+  const [relayEnvironment] = useState(() => createRelayEnvironment());
+
+  return (
+    <RelayEnvironmentProvider environment={relayEnvironment}>
+      <NavigationContainer>
+        <MobileAnalyticsProvider>{children}</MobileAnalyticsProvider>
+      </NavigationContainer>
+    </RelayEnvironmentProvider>
+  );
+}

apps/mobile/src/tests/setupFile.js

@@ -0,0 +1,11 @@
+global.console = {
+  ...console,
+  // uncomment to ignore a specific log level
+  warn: jest.fn(),
+};
+
+jest.mock('~/env/runtime', () => ({
+  env: {
+    GRAPHQL_API_URL: 'https://api.example.com/graphql',
+  },
+}));

apps/mobile/tsconfig.jest.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "jsx": "react-jsx"
+  }
+}

apps/mobile/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.options.json",
-  "include": ["persisted_queries.json", "src", "app.d.ts", "__generated__", "env"],
+  "include": ["persisted_queries.json", "src", "app.d.ts", "__generated__", "env", "__mocks__"],
   "compilerOptions": {
     "lib": ["DOM", "ESNext"],
     "baseUrl": ".",
@@ -14,7 +14,8 @@
       "~/env/*": ["env/*"],
       "~/screens/*": ["src/screens/*"],
       "~/components/*": ["src/components/*"],
-      "~/shared/*": ["../../packages/shared/src/*"],
+      "~/tests/*": ["src/tests/*"],
+      "~/shared/*": ["../../packages/shared/src/*"]
     },
     "outDir": "../../.moon/cache/types/apps/mobile"
   },