feat: add createMock()

babel.config.js

@@ -1,3 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
@@ -23,7 +25,7 @@ module.exports = {
         },
       },
     ],
-    "@babel/plugin-transform-numeric-separator",
+    '@babel/plugin-transform-numeric-separator',
     '@babel/plugin-proposal-unicode-property-regex',
     '@babel/plugin-proposal-export-namespace-from',
     'react-native-reanimated/plugin',

jest.config.js

@@ -1,8 +1,28 @@
 const { excludeCollectCoverageFrom } = require('./jest.excludeCollectCoverageFrom.config')
 
+const { createJsWithBabelPreset } = require('ts-jest')
+
+const jsWithBabelPreset = createJsWithBabelPreset({
+  tsconfig: 'tsconfig.spec.json',
+  babelConfig: true,
+})
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+
 module.exports = {
   preset: 'react-native',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node','android.tsx','android.ts','android.jsx','android.js'],
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'json',
+    'node',
+    'android.tsx',
+    'android.ts',
+    'android.jsx',
+    'android.js',
+  ],
   testEnvironmentOptions: { customExportConditions: [''] },
   moduleNameMapper: {
     '^api(.*)$': '<rootDir>/src/api$1',
@@ -23,9 +43,7 @@ module.exports = {
     '@react-native-google-signin/google-signin/jest/build/setup.js',
   ],
   setupFilesAfterEnv: ['./src/tests/setupTests.js'],
-  transform: {
-    '^.+\\.[jt]sx?$': 'babel-jest',
-  },
+  transform: jsWithBabelPreset.transform,
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native' +
       '|@react-navigation' +

jest/jest.setup.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-undef */
 import 'cross-fetch/polyfill'
+import 'jest-ts-auto-mock'
 
 // @ts-ignore jest can have access to this file but typescript does not know it
 // We can see it
-import mockRNDeviceInfo from 'react-native-device-info/jest/react-native-device-info-mock'
 
 jest.unmock('react-query')
 
@@ -24,6 +24,11 @@ jest.mock('libs/analytics/provider')
 jest.mock('libs/environment/env')
 
 // I have a problem with mockRNDeviceInfo doesn't recognize by TS
-jest.mock('react-native-device-info', () => mockRNDeviceInfo)
+jest.mock('react-native-device-info', () => {
+  const mockRNDeviceInfo = jest.requireActual(
+    'react-native-device-info/jest/react-native-device-info-mock'
+  )
+  return mockRNDeviceInfo
+})
 
 jest.unmock('react-native-modal')

jest/jest.web.setup.ts

@@ -1,9 +1,8 @@
 import 'jest-canvas-mock'
-import mockFirestore from 'libs/firebase/shims/firestore/index.web'
 
 jest.unmock('react-native-modal')
 jest.mock('libs/firebase/firestore/client.web', () => {
-  const firestoreRemoteStore = mockFirestore()
+  const firestoreRemoteStore = jest.requireActual('libs/firebase/shims/firestore/index.web')
   firestoreRemoteStore.settings({ experimentalAutoDetectLongPolling: true, merge: true })
   return {
     __esModule: true,

package.json

@@ -32,6 +32,7 @@
     ]
   },
   "scripts": {
+    "prepare": "ts-patch install -s",
     "preandroid": "./scripts/start_android_emulator_with_certificate.sh",
     "android": "react-native run-android",
     "android:prod": "yarn android --variant=productionDebug --appId=app.passculture.webapp",
@@ -322,6 +323,7 @@
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^13.2.0",
     "jest-styled-components": "^7.0.8",
+    "jest-ts-auto-mock": "^2.1.0",
     "jetifier": "^1.6.5",
     "json": "^11.0.0",
     "mailparser": "^3.6.3",
@@ -342,7 +344,10 @@
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "timezone-mock": "^1.2.1",
+    "ts-auto-mock": "^3.7.4",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.8.0",
+    "ts-patch": "^3.2.1",
     "ts-prune": "^0.10.3",
     "type-fest": "^4.15.0",
     "typescript": "5.0.4",

src/features/home/components/helpers/filterBookingsWithoutReaction/filterBookingsWithoutReaction.test.ts

@@ -1,4 +1,5 @@
 import mockdate from 'mockdate'
+import { createMock } from 'ts-auto-mock'
 
 import {
   BookingReponse,
@@ -39,15 +40,10 @@ describe('filterBookingsWithoutReaction', () => {
     subcategoriesMappingSnap as SubcategoriesMapping
 
   it('should return false if dateUsed is missing', () => {
-    const bookingWithoutDateUsed = {
-      ...baseBooking,
-      stock: {
-        ...baseBooking.stock,
-        offer: { ...baseBooking.stock.offer, subcategoryId: SubcategoryIdEnum.SEANCE_CINE },
-      },
-      dateUsed: null,
+    const bookingWithoutDateUsed = createMock<BookingReponse>({
       userReaction: null,
-    }
+    })
+
     const result = filterBookingsWithoutReaction(
       bookingWithoutDateUsed,
       subcategoriesMapping,

tsconfig.json

@@ -4,12 +4,18 @@
     "paths": {
       "*": ["src/*", "*"]
     },
+    "plugins": [
+      {
+        "transform": "ts-auto-mock/transformer",
+        "cacheBetweenTests": false
+      }
+    ],
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react",
-    "lib": ["es2022","dom", "dom.iterable", "esnext"],
+    "lib": ["es2022", "dom", "dom.iterable", "esnext"],
     "module": "ESNext",
     "moduleResolution": "node",
     "noEmit": true,
@@ -20,7 +26,7 @@
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "resolveJsonModule": true,
-    "target": "es5",
+    "target": "es6",
     "skipLibCheck": true,
     "sourceMap": true,
     "removeComments": true,

tsconfig.spec.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}