✅ Test a UI component

components/__tests__/TypeTacticsInfoList.test.tsx

@@ -1,9 +1,9 @@
-// components/TypeTacticsInfoList.test.ts
+// components/__tests__/TypeTacticsInfoList.test.ts
 
 import React from 'react';
 import { render } from '@testing-library/react-native';
-import TypeTacticsInfoList from './TypeTacticsInfoList';
+import TypeTacticsInfoList from '../TypeTacticsInfoList';
-import { TypeName } from "../entities/TypeName";
+import { TypeName } from "../../entities/TypeName";
 
 describe('TypeTacticsInfoList component', () => {
     it('renders types correctly', () => {
@@ -17,12 +17,12 @@ describe('TypeTacticsInfoList component', () => {
 
     it('renders "Nothing" when types array is empty', () => {
         const { getByText } = render(<TypeTacticsInfoList isWeakness={false} types={[]}/>);
-        expect(getByText('Nothing')).toBeTruthy();
+        expect(getByText('NOTHING')).toBeTruthy();
     });
 
     it('renders "Nothing" when types is undefined', () => {
         // @ts-ignore
         const { getByText } = render(<TypeTacticsInfoList isWeakness={true} types={undefined}/>);
-        expect(getByText('Nothing')).toBeTruthy();
+        expect(getByText('NOTHING')).toBeTruthy();
     });
 });

package.json

@@ -56,6 +56,7 @@
     "react-native-web": "~0.18.11",
     "react-redux": "^8.0.7",
     "redux": "^4.2.1",
+    "redux-mock-store": "^1.5.4",
     "redux-thunk": "^2.4.2",
     "typescript": "^4.9.4"
   },
@@ -63,6 +64,7 @@
     "@babel/core": "^7.20.0",
     "@types/jest": "^29.5.1",
     "@types/react-native": "~0.64.12",
+    "@types/redux-mock-store": "^1.0.3",
     "jest": "^29.2.1",
     "jest-expo": "^48.0.0"
   },

screens/moves/__tests__/MoveDetailScreen.test.tsx

@@ -0,0 +1,71 @@
+// screens/moves/__tests__/MoveDetailScreen.test.tsx
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import MoveDetailScreen from '../MoveDetailScreen';
+import { MOVE_FORM } from "../../../navigation/constants";
+
+const mockStore = configureStore([]);
+
+describe('MoveDetailScreen', () => {
+    let store;
+    let component: JSX.Element;
+    // @ts-ignore
+    let navigation;
+
+    beforeEach(() => {
+        const mockMove = {
+            id: '1',
+            name: 'Test Move',
+            category: 'PHYSICAL',
+            power: '100',
+            accuracy: '100',
+            type: {
+                name: 'NORMAL',
+                weakAgainst: [],
+                effectiveAgainst: [],
+            },
+        };
+
+        store = mockStore({
+            move: {
+                moves: [mockMove],
+                error: null,
+            },
+        });
+
+        navigation = { navigate: jest.fn(), setOptions: jest.fn() };
+        const route = { params: { move: mockMove } };
+
+        component = (
+            <Provider store={store}>
+                {/* @ts-ignore */}
+                <MoveDetailScreen navigation={navigation} route={route} />
+            </Provider>
+        );
+    });
+
+    it('renders correctly', () => {
+        const { getByText } = render(component);
+        expect(getByText('Name: Test Move')).toBeTruthy();
+        expect(getByText('Category: PHYSICAL')).toBeTruthy();
+        expect(getByText('Power: 100')).toBeTruthy();
+        expect(getByText('Accuracy: 100')).toBeTruthy();
+        expect(getByText('Type: NORMAL')).toBeTruthy();
+    });
+
+    it('navigates to the form screen when the edit button is pressed', () => {
+        const { getByText } = render(component);
+        fireEvent.press(getByText('Edit Move'));
+        // @ts-ignore
+        expect(navigation.navigate).toHaveBeenCalledWith(MOVE_FORM, { move: expect.any(Object) });
+    });
+
+    it('sets the navigation options correctly', () => {
+        render(component);
+        // @ts-ignore
+        expect(navigation.setOptions).toHaveBeenCalledWith({ title: 'Test Move' });
+    });
+});

yarn.lock

@@ -2478,6 +2478,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/redux-mock-store@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb"
+  integrity sha512-Wqe3tJa6x9MxMN4DJnMfZoBRBRak1XTPklqj4qkVm5VBpZnC8PSADf4kLuFQ9NAdHaowfWoEeUMz7NWc2GMtnA==
+  dependencies:
+    redux "^4.0.5"
+
 "@types/retry@0.12.0":
   version "0.12.0"
   resolved "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz"
@@ -6752,6 +6759,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
@@ -8648,12 +8660,19 @@ recast@^0.20.4:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+redux-mock-store@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
+  integrity sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
 redux-thunk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
   integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
 
-redux@^4.2.1:
+redux@^4.0.5, redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==