Navigation tests

jest.config.js → jest.config.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { Config } from 'jest';
+
+const config: Config = {
     preset: 'jest-expo',
     transform: {
         '^.+\\.tsx?$': 'babel-jest',
@@ -9,6 +11,8 @@ module.exports = {
     testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
     setupFilesAfterEnv: [
-        "@testing-library/jest-native/extend-expect"
+        "@testing-library/jest-native/extend-expect",
     ]
 };
+
+export default config;

package.json

@@ -89,7 +89,8 @@
     "jest": "^29.5.0",
     "prettier": "^3.0.1",
     "react-test-renderer": "^18.2.0",
-    "redux-mock-store": "^1.5.4"
+    "redux-mock-store": "^1.5.4",
+    "ts-node": "^10.9.1"
   },
   "overrides": {},
   "homepage": "/scorepad-app",

src/Navigation.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { Navigation } from './Navigation';
+import { Provider } from 'react-redux';
+import { store } from '../redux/store';
+import { setOnboardedVersion } from '../redux/SettingsSlice';
+
+describe('Navigation', () => {
+    it('does not show the onboarding screen when onboardedSemVer 1.0.0', () => {
+        render(
+            <Provider store={store}>
+                <Navigation />
+            </Provider>
+        );
+
+        expect(screen.queryByTestId('onboarding')).toBeOnTheScreen();
+    });
+
+    it('does not show the onboarding screen when onboardedSemVer is equal or greater than 2.2.2', () => {
+        store.dispatch(setOnboardedVersion());
+        render(
+            <Provider store={store}>
+                <Navigation />
+            </Provider>
+        );
+
+        expect(screen.queryByTestId('onboarding')).not.toBeOnTheScreen();
+    });
+});

src/screens/OnboardingScreen.tsx

@@ -148,7 +148,7 @@ const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route })
     }, [activeIndex]);
 
     return (
-        <Animated.View style={[styles.container]} entering={FadeIn}>
+        <Animated.View style={[styles.container]} entering={FadeIn} testID={'onboarding'}>
             <SafeAreaView edges={(['top', 'bottom'])} style={onboarding ? { paddingTop: 40 } : {}}>
                 <View style={[StyleSheet.absoluteFillObject]}>
                     {data.map((item, index) => {

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "strict": true,
-    "jsx": "react-native"
+    "jsx": "react-native",
+    "types": [
+      "@testing-library/jest-native",
+      "jest",
+    ],
   },
   "extends": "expo/tsconfig.base",
   "include": [
@@ -10,4 +14,4 @@
     "./src/**/*.js",
     "./redux/**/*.ts",
   ],
-}
+}