Merge pull request Expensify#35316 from JKobrynski/migrateJestFilesTo…

…TypeScript

[No QA] [TS migration] Migrate 'Jest' files to TypeScript

jest.config.js

@@ -22,8 +22,8 @@ module.exports = {
         doNotFake: ['nextTick'],
     },
     testEnvironment: 'jsdom',
-    setupFiles: ['<rootDir>/jest/setup.js', './node_modules/@react-native-google-signin/google-signin/jest/build/setup.js'],
-    setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', '<rootDir>/jest/setupAfterEnv.js', '<rootDir>/tests/perf-test/setupAfterEnv.js'],
+    setupFiles: ['<rootDir>/jest/setup.ts', './node_modules/@react-native-google-signin/google-signin/jest/build/setup.js'],
+    setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', '<rootDir>/jest/setupAfterEnv.ts', '<rootDir>/tests/perf-test/setupAfterEnv.js'],
     cacheDirectory: '<rootDir>/.jest-cache',
     moduleNameMapper: {
         '\\.(lottie)$': '<rootDir>/__mocks__/fileMock.js',

jest/setup.js → jest/setup.ts

@@ -1,6 +1,7 @@
 import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock';
 import '@shopify/flash-list/jestSetup';
 import 'react-native-gesture-handler/jestSetup';
+import mockStorage from 'react-native-onyx/dist/storage/__mocks__';
 import * as reanimatedJestUtils from 'react-native-reanimated/src/reanimated2/jestUtils';
 import 'setimmediate';
 import setupMockImages from './setupMockImages';
@@ -19,7 +20,7 @@ jest.mock('@react-native-clipboard/clipboard', () => mockClipboard);
 // Mock react-native-onyx storage layer because the SQLite storage layer doesn't work in jest.
 // Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project,
 // and we only want to mock the storage layer, not the whole Onyx module.
-jest.mock('react-native-onyx/dist/storage', () => require('react-native-onyx/dist/storage/__mocks__'));
+jest.mock('react-native-onyx/dist/storage', () => mockStorage);
 
 // Turn off the console logs for timing events. They are not relevant for unit tests and create a lot of noise
 jest.spyOn(console, 'debug').mockImplementation((...params) => {
@@ -34,6 +35,6 @@ jest.spyOn(console, 'debug').mockImplementation((...params) => {
 
 // This mock is required for mocking file systems when running tests
 jest.mock('react-native-fs', () => ({
-    unlink: jest.fn(() => new Promise((res) => res())),
+    unlink: jest.fn(() => new Promise<void>((res) => res())),
     CachesDirectoryPath: jest.fn(),
 }));

jest/setupMockImages.js → jest/setupMockImages.ts

@@ -1,14 +1,10 @@
 import fs from 'fs';
 import path from 'path';
-import _ from 'underscore';
 
-/**
- * @param {String} imagePath
- */
-function mockImages(imagePath) {
+function mockImages(imagePath: string) {
     const imageFilenames = fs.readdirSync(path.resolve(__dirname, `../assets/${imagePath}/`));
     // eslint-disable-next-line rulesdir/prefer-early-return
-    _.each(imageFilenames, (fileName) => {
+    imageFilenames.forEach((fileName) => {
         if (/\.svg/.test(fileName)) {
             jest.mock(`../assets/${imagePath}/${fileName}`, () => () => '');
         }

src/types/modules/react-native-clipboard.d.ts

@@ -0,0 +1,16 @@
+declare module '@react-native-clipboard/clipboard/jest/clipboard-mock' {
+    const mockClipboard: {
+        getString: jest.MockedFunction<() => Promise<string>>;
+        getImagePNG: jest.MockedFunction<() => void>;
+        getImageJPG: jest.MockedFunction<() => void>;
+        setImage: jest.MockedFunction<() => void>;
+        setString: jest.MockedFunction<() => void>;
+        hasString: jest.MockedFunction<() => Promise<boolean>>;
+        hasImage: jest.MockedFunction<() => Promise<boolean>>;
+        hasURL: jest.MockedFunction<() => Promise<boolean>>;
+        addListener: jest.MockedFunction<() => void>;
+        removeAllListeners: jest.MockedFunction<() => void>;
+        useClipboard: jest.MockedFunction<() => [string, jest.MockedFunction<() => void>]>;
+    };
+    export default mockClipboard;
+}

tests/README.md

@@ -45,9 +45,9 @@ const policies = createCollection<Policy>(
 );
 ```
 
-## Mocking `node_modules`, user modules, and what belongs in `jest/setup.js`
+## Mocking `node_modules`, user modules, and what belongs in `jest/setup.ts`
 
-If you need to mock a library that exists in `node_modules` then add it to the `__mocks__` folder in the root of the project. More information about this [here](https://jestjs.io/docs/manual-mocks#mocking-node-modules). If you need to mock an individual library you should create a mock module in a `__mocks__` subdirectory adjacent to the library as explained [here](https://jestjs.io/docs/manual-mocks#mocking-user-modules). However, keep in mind that when you do this you also must manually require the mock by calling something like `jest.mock('../../src/libs/Log');` at the top of an individual test file. If every test in the app will need something to be mocked that's a good case for adding it to `jest/setup.js`, but we should generally avoid adding user mocks or `node_modules` mocks to this file. Please use the `__mocks__` subdirectories wherever appropriate.
+If you need to mock a library that exists in `node_modules` then add it to the `__mocks__` folder in the root of the project. More information about this [here](https://jestjs.io/docs/manual-mocks#mocking-node-modules). If you need to mock an individual library you should create a mock module in a `__mocks__` subdirectory adjacent to the library as explained [here](https://jestjs.io/docs/manual-mocks#mocking-user-modules). However, keep in mind that when you do this you also must manually require the mock by calling something like `jest.mock('../../src/libs/Log');` at the top of an individual test file. If every test in the app will need something to be mocked that's a good case for adding it to `jest/setup.ts`, but we should generally avoid adding user mocks or `node_modules` mocks to this file. Please use the `__mocks__` subdirectories wherever appropriate.
 
 ## Assertions