Add app tests

apps/example/babel.config.js

@@ -0,0 +1,33 @@
+const reactStrictPreset = require('react-strict-dom/babel-preset');
+
+function getPlatform(caller) {
+  // This information is populated by Expo
+  return caller && caller.platform;
+}
+
+function getIsDev(caller) {
+  // This information is populated by Expo
+  if (caller?.isDev != null) return caller.isDev;
+  // https://babeljs.io/docs/options#envname
+  return (
+    process.env.BABEL_ENV === 'development' ||
+    process.env.NODE_ENV === 'development'
+  );
+}
+
+module.exports = function (api) {
+  // If not using Expo, set these values manually or by other means
+  const dev = api.caller(getIsDev);
+  const platform = api.caller(getPlatform);
+
+  return {
+    plugins: [],
+    presets: [
+      // Expo's babel preset
+      'babel-preset-expo',
+
+      // React Strict DOM's babel preset
+      [reactStrictPreset, { debug: dev, dev, platform }]
+    ]
+  };
+};

apps/example/jest.config.js

@@ -0,0 +1,19 @@
+const transformIgnorePatterns = [
+  'node_modules/' +
+    '(' +
+    // default expo patterns
+    '?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg' +
+    // extra
+    '|react-strict-dom' +
+    ')'
+];
+
+/** @type {import('jest').Config} */
+const config = {
+  cache: false,
+  verbose: true,
+  preset: 'jest-expo',
+  transformIgnorePatterns
+};
+
+module.exports = config;

apps/example/package.json

@@ -7,6 +7,7 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "start": "expo start",
+    "test": "jest",
     "web": "expo start --web"
   },
   "dependencies": {
@@ -20,7 +21,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.9",
+    "@testing-library/react-native": "^13.2.0",
+    "@types/jest": "^29.5.14",
     "@types/react": "~18.3.18",
+    "jest": "~29.7.0",
+    "jest-expo": "~52.0.6",
+    "react-test-renderer": "18.3.1",
     "typescript": "^5.7.3"
   }
 }

apps/example/src/App.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react-native';
+
+import App from './App';
+
+describe('App', () => {
+  it('renders correctly', () => {
+    render(<App />);
+    screen.getByText('Rendered!');
+  });
+});

apps/example/src/App.tsx

@@ -237,6 +237,8 @@ export default function App() {
           </svg.tspan>
         </svg.text>
       </svg.svg>
+
+      <html.p>Rendered!</html.p>
     </html.div>
   );
 }

apps/vite-project/babel.config.js → apps/vite-project/babel.config.cjs

@@ -1,6 +1,7 @@
-export default {
+module.exports = {
   presets: [
     ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
     'react-strict-dom/babel-preset'
   ]
 };

apps/vite-project/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "build": "tsc -b && vite build",
     "dev": "vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@stylexjs/stylex": "^0.10.1",
@@ -17,13 +18,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.9",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.1.0",
     "postcss": "^8.5.2",
     "postcss-react-strict-dom": "^0.0.6",
     "typescript": "^5.7.3",
     "vite": "^6.1.0",
-    "vite-plugin-babel": "^1.3.0"
+    "vite-plugin-babel": "^1.3.0",
+    "vitest": "^3.2.3"
   }
 }

apps/vite-project/src/App.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it } from 'vitest';
+
+import App from './App';
+
+describe('App', () => {
+  it('renders correctly', () => {
+    render(<App />);
+    screen.getByText('Vite + React');
+  });
+});

apps/vite-project/vite.config.ts

@@ -5,13 +5,11 @@ import babel from 'vite-plugin-babel';
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    babel(),
     react({
       babel: {
         presets: ['react-strict-dom/babel-preset']
       }
-    }),
-    babel({
-      include: /node_modules\/react-strict-dom(-svg)?/
     })
   ]
 });

apps/vite-project/vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+import viteConfig from './vite.config';
+
+export default defineConfig(() =>
+  mergeConfig(
+    viteConfig,
+    defineConfig({
+      test: {
+        globals: true,
+        environment: 'jsdom',
+        server: {
+          deps: {
+            inline: ['react-strict-dom']
+          }
+        }
+      }
+    })
+  )
+);

package.json

@@ -6,7 +6,8 @@
     "packages/*"
   ],
   "scripts": {
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "yarn apps/example test && yarn apps/vite-project test"
   },
   "prettier": {
     "plugins": [

packages/react-strict-dom-svg/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "license": "MIT",
   "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
@@ -11,8 +12,8 @@
         "default": "./dist/index.js"
       },
       "require": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       }
     },
     "./package.json": "./package.json"