feat: Add jest tests and run it on workflow

.github/workflows/ci.yaml

@@ -0,0 +1,19 @@
+name: Jest on CI
+
+on:
+  push:
+    branches: main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependecies
+        run: npm ci
+
+      - name: Run test
+        run: npm test

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: ['module:@react-native/babel-preset', '@babel/preset-typescript'],
 };

ios/onboarding/Info.plist

@@ -26,12 +26,13 @@
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	  <!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
 		<true/>
 	</dict>
+	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
+	<string>This is needed to get location updates in the background</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>UILaunchStoryboardName</key>

jest-setup.js

@@ -0,0 +1 @@
+import '@testing-library/react-native/extend-expect';

jest.config.js

@@ -1,3 +1,8 @@
 module.exports = {
   preset: 'react-native',
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+  testMatch: ['<rootDir>/src/**/*.test.ts?(x)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|rollbar-react-native|@react-native|@react-navigation)',
+  ],
 };

package.json

@@ -24,16 +24,19 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
+    "@babel/preset-typescript": "^7.23.3",
     "@babel/runtime": "^7.20.0",
     "@react-native/babel-preset": "0.73.21",
     "@react-native/eslint-config": "0.73.2",
     "@react-native/metro-config": "0.73.5",
     "@react-native/typescript-config": "0.73.1",
+    "@testing-library/react-native": "^12.4.3",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.56.0",
-    "jest": "^29.6.3",
+    "jest": "^29.7.0",
     "prettier": "2.8.8",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"

src/components/weather-row/__snapshots__/weather.test.tsx.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Weather row should render correctly 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "borderBottomWidth": 1,
+      "borderColor": "#ddd",
+      "marginBottom": 10,
+      "opacity": 1,
+      "paddingBottom": 10,
+      "paddingHorizontal": 10,
+    }
+  }
+  testID="wheather-row"
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "height": 50,
+          "position": "relative",
+          "width": 80,
+        }
+      }
+    >
+      <Image
+        height={50}
+        source={
+          {
+            "uri": "https://openweathermap.org/img/wn/[email protected]",
+          }
+        }
+        style={
+          {
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+          }
+        }
+        width={50}
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "column",
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontWeight": "600",
+          }
+        }
+        testID="cityName"
+      >
+        Gothem
+      </Text>
+      <Text
+        style={
+          {
+            "fontWeight": "300",
+          }
+        }
+      >
+        snow
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#9c3a5f",
+          "borderRadius": 50,
+          "padding": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#fff",
+          }
+        }
+      >
+        100 F
+      </Text>
+    </View>
+    <Text>
+      &gt;
+    </Text>
+  </View>
+</View>
+`;

src/components/wheather-row/index.tsx → src/components/weather-row/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import {useNavigation} from '@react-navigation/native';
 import {Image, Text, TouchableOpacity, View} from 'react-native';
 
-type WheatherRowProps = {
-  wheather: any;
+type WeatherRowProps = {
+  weather: any;
 };
 
-const WheatherRow = ({wheather}: WheatherRowProps) => {
+const WeatherRow = ({weather}: WeatherRowProps) => {
   const navigation = useNavigation();
-  const {name, main, coord, weather: details} = wheather;
+  const {name, main, coord, weather: details} = weather;
 
   return (
     <TouchableOpacity
@@ -56,7 +56,9 @@ const WheatherRow = ({wheather}: WheatherRowProps) => {
             flexDirection: 'column',
             alignItems: 'center',
           }}>
-          <Text style={{fontWeight: '600'}}>{name}</Text>
+          <Text style={{fontWeight: '600'}} testID="cityName">
+            {name}
+          </Text>
           <Text style={{fontWeight: '300'}}>{details[0].main}</Text>
         </View>
 
@@ -70,4 +72,4 @@ const WheatherRow = ({wheather}: WheatherRowProps) => {
   );
 };
 
-export default WheatherRow;
+export default WeatherRow;