test(expo-template): make tests and checks runnable

.changeset/expo-template-runnable-checks.md

@@ -0,0 +1,5 @@
+---
+'@bottom-tabs/expo-template': patch
+---
+
+Replace react-test-renderer with React Native Testing Library, and add lint and typecheck scripts

CONTRIBUTING.md

@@ -88,6 +88,18 @@ We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint]
 
 Our pre-commit hooks verify that the linter and tests pass when committing.
 
+`yarn lint` and `yarn typecheck` deliberately skip `@bottom-tabs/expo-template`. The template has
+its own `lint` and `typecheck` scripts.
+
+Check the template the way people actually consume it - pack it, scaffold an app, and run its scripts there:
+
+```sh
+yarn workspace @bottom-tabs/expo-template pack --out /tmp/expo-template.tgz
+npx create-expo-app@latest /tmp/tpl --template /tmp/expo-template.tgz
+cd /tmp/tpl && npm install && npx expo start # generates .expo/types, then stop it
+npm run lint && npm run typecheck && npm test
+```
+
 ### Changesets
 
 We use [changesets](https://github.com/changesets/changesets) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc.

package.json

@@ -9,9 +9,9 @@
     ]
   },
   "scripts": {
-    "lint": "turbo run lint",
+    "lint": "turbo run lint --filter='!@bottom-tabs/expo-template'",
     "test": "turbo run test",
-    "typecheck": "turbo run typecheck",
+    "typecheck": "turbo run typecheck --filter='!@bottom-tabs/expo-template'",
     "build": "turbo run build",
     "build:android": "turbo run build:android",
     "build:ios": "turbo run build:ios",

packages/expo-template/app/(tabs)/explore.tsx

@@ -80,7 +80,7 @@ export default function TabTwoScreen() {
         <ThemedText>
           This template has light and dark mode support. The{' '}
           <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook
-          lets you inspect what the user's current color scheme is, and so you
+          lets you inspect what the user&apos;s current color scheme is, and so you
           can adjust UI colors accordingly.
         </ThemedText>
         <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">

packages/expo-template/app/(tabs)/index.tsx

@@ -39,14 +39,14 @@ export default function HomeScreen() {
       <ThemedView style={styles.stepContainer}>
         <ThemedText type="subtitle">Step 2: Explore</ThemedText>
         <ThemedText>
-          Tap the Explore tab to learn more about what's included in this
+          Tap the Explore tab to learn more about what&apos;s included in this
           starter app.
         </ThemedText>
       </ThemedView>
       <ThemedView style={styles.stepContainer}>
         <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
         <ThemedText>
-          When you're ready, run{' '}
+          When you&apos;re ready, run{' '}
           <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText>{' '}
           to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{' '}
           directory. This will move the current{' '}

packages/expo-template/app/+not-found.tsx

@@ -9,7 +9,7 @@ export default function NotFoundScreen() {
     <>
       <Stack.Screen options={{ title: 'Oops!' }} />
       <ThemedView style={styles.container}>
-        <ThemedText type="title">This screen doesn't exist.</ThemedText>
+        <ThemedText type="title">This screen doesn&apos;t exist.</ThemedText>
         <Link href="/" style={styles.link}>
           <ThemedText type="link">Go to home screen!</ThemedText>
         </Link>

packages/expo-template/components/__tests__/ThemedText-test.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react-native';
 
 import { ThemedText } from '../ThemedText';
 
-it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+it('renders its children', async () => {
+  await render(<ThemedText>Snapshot test!</ThemedText>);
 
-  expect(tree).toMatchSnapshot();
+  expect(screen.getByText('Snapshot test!')).toBeOnTheScreen();
 });

packages/expo-template/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require("eslint-config-expo/flat");
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ["dist/*"],
+  }
+]);

packages/expo-template/package.json

@@ -8,7 +8,10 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web",
-    "test": "jest --watchAll"
+    "lint": "expo lint",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watchAll"
   },
   "repository": {
     "type": "git",
@@ -44,12 +47,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",
+    "@testing-library/react-native": "^14.0.1",
     "@types/jest": "^29.5.12",
     "@types/react": "~19.1.10",
-    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^9.39.5",
+    "eslint-config-expo": "~10.0.0",
     "jest": "^29.2.1",
     "jest-expo": "~54.0.17",
-    "react-test-renderer": "19.1.0",
     "typescript": "^5.9.2"
   }
 }