Trying to kludge together a working test environment and actually make a first test

app/root.test.tsx

@@ -0,0 +1,40 @@
+import { act, render, screen, waitFor } from '@testing-library/react'
+
+import { createRemixStub, RemixStubProps } from "@remix-run/testing"
+import App from './root'
+let RemixStub: (props: RemixStubProps) => React.JSX.Element
+
+describe("root", () => {
+    beforeEach(() => {
+        RemixStub = createRemixStub([
+            {
+                path: "/",
+                meta: () => ([]),
+                links: () => ([]),
+                Component: App
+            }
+        ])
+    })
+
+    describe("when user is on iOS", () => {
+        describe("version 16.4 or higher", () => {
+            describe("and tack up now is not already installed on their device", () => {
+                test("they are instructed to install tack up now", async () => {
+                    // render(<RemixStub/>)
+                    let x: number = 4
+                    // await waitFor(() => screen.findByText<HTMLElement>("Whoah"))
+                    console.log("YES HI")
+
+                    expect(true).toBe(true)
+                })
+            })
+
+            // describe("and tack up now is already installed on their device", () => {
+            //     describe("and they are not in standalone mode", () => {
+                    
+            //     })
+            // })
+
+        })
+    })
+})

app/root.tsx

@@ -5,6 +5,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import React, { useEffect, useRef, useState } from "react";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -27,3 +28,5 @@ export function Layout({ children }: { children: React.ReactNode }) {
 export default function App() {
   return <Outlet />;
 }
+
+() => Promise<Json<{ contacts: Contact[]}>>

babel.config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }],
+        '@babel/preset-typescript',
+        ["@babel/preset-react", {
+            "runtime": "automatic"
+        }]
+    ],
+}

docker-compose.yaml

@@ -6,7 +6,7 @@ services:
   database:
     image: postgres
     ports:
-      - "0.0.0.0:5433:5432"
+      - "5433:5432"
     environment:
       POSTGRES_PASSWORD: $POSTGRES_PASSWORD
       POSTGRES_USER: postgres

jest.config.ts

@@ -0,0 +1,19 @@
+import type {Config} from 'jest';
+
+const config: Config = {
+  verbose: true,
+  testPathIgnorePatterns: ["/node_modules/", "data/"],
+  watchPathIgnorePatterns: [
+    "data"
+  ],
+  preset: "ts-jest",
+  testEnvironment: "jest-environment-jsdom",
+  transform: {
+  //  '^.+\\.ts?$': 'ts-jest',
+  //  '^.+\\.tsx?$': 'ts-jest',
+   '^.+\\.[t|j]s?$': 'babel-jest',
+   '^.+\\.[t|j]sx?$': 'babel-jest',
+  }
+};
+
+export default config;

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc",
-    "test": "jest --watch"
+    "test": "jest --watch --config=jest.config.ts"
   },
   "dependencies": {
     "@remix-run/express": "^2.9.1",
@@ -23,15 +23,22 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@remix-run/dev": "^2.9.0",
     "@remix-run/testing": "^2.9.1",
+    "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.4",
     "@types/express": "^4.17.21",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/supertest": "^6.0.2",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
+    "babel-jest": "^29.7.0",
     "chai": "^4.4.1",
     "chai-as-promised": "^7.1.1",
     "eslint": "^8.38.0",
@@ -41,9 +48,11 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "supertest": "^7.0.0",
+    "ts-jest": "^29.1.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",

setupTests.ts

@@ -0,0 +1,6 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import 'react'
+import '@testing-library/jest-dom'

tsconfig.json

@@ -9,7 +9,7 @@
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["@remix-run/node", "vite/client"],
+    "types": ["@remix-run/jsdom", "@remix-run/node", "vite/client", "jest", "node"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",