A working example on how to make ts-jest work with detox

[lelukas]

I know this probably is not the right place for such help request, but I looked for help in so many places and only found very old documentation on how to integrate ts-jest and Detox. If anyone has an updated working example it would be much appreciated, but if not, can you guys at least help me with what I have so far?

Here's what I have in my e2e folder:

e2e/config.json

{
    "maxWorkers": 1,
    "testRunner": "jest-circus/runner",
    "testTimeout": 120000,
    "testRegex": "\\.e2e\\.ts$",
    "reporters": ["detox/runners/jest/streamlineReporter"],
    "verbose": true,
    "preset": "ts-jest",
    "testEnvironment": "node",
    "setupTestFrameworkScriptFile": "./init.ts"
}

---

e2e/enviroment.js

const {
  DetoxCircusEnvironment,
  SpecReporter,
  WorkerAssignReporter,
} = require('detox/runners/jest-circus')

class CustomDetoxEnvironment extends DetoxCircusEnvironment {
  constructor(config, context) {
    super(config, context)

    // Can be safely removed, if you are content with the default value (=300000ms)
    this.initTimeout = 300000

    // This takes care of generating status logs on a per-spec basis. By default, Jest only reports at file-level.
    // This is strictly optional.
    this.registerListeners({
      SpecReporter,
      WorkerAssignReporter,
    })
  }
}

module.exports = CustomDetoxEnvironment

---

e2e/init.ts

import {cleanup, init} from 'detox'
import 'jasmine'

const config = require('../package.json').detox as Detox.DetoxConfig
const adapter = require('detox/runners/jest/adapter')

// eslint-disable-next-line no-magic-numbers
jest.setTimeout(120000)
jasmine.getEnv().addReporter(adapter)

beforeAll(async () => {
  await init(config, {initGlobals: false})
})

beforeEach(async () => {
  await adapter.beforeEach()
})

afterAll(async () => {
  await adapter.afterAll()
  await cleanup()
})

---

Dev dependencies on package.json

"devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jasmine": "^3.10.3",
    "@types/jest": "^27.4.1",
    "@types/lodash.debounce": "^4.0.6",
    "@types/lodash.unescape": "^4.0.6",
    "@types/react-native": "^0.67.1",
    "@types/react-native-htmlview": "^0.12.2",
    "@types/react-native-vector-icons": "^6.4.10",
    "@types/react-native-video": "^5.0.12",
    "@types/react-test-renderer": "^17.0.1",
    "@types/styled-components": "^5.1.24",
    "@types/styled-components-react-native": "^5.1.3",
    "@types/underscore": "^1.11.4",
    "@typescript-eslint/eslint-plugin": "^5.13.0",
    "@typescript-eslint/parser": "^5.13.0",
    "babel-jest": "^26.6.3",
    "detox": "^19.5.1",
    "eslint": "^8.10.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^16.1.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-react-app": "^7.0.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-const-case": "^1.2.2",
    "eslint-plugin-detox": "^1.0.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jest": "^26.1.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-no-null": "^1.0.2",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.2",
    "eslint-plugin-react-hooks": "^4.3.0",
    "husky": "^7.0.0",
    "jest": "^27.5.1",
    "jest-circus": "^27.5.1",
    "lint-staged": "^11.1.1",
    "metro-react-native-babel-preset": "^0.66.2",
    "patch-package": "^6.4.7",
    "plop": "^2.7.4",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.2.0",
    "prettier-eslint": "^11.0.0",
    "prettier-standard": "^16.4.1",
    "react-test-renderer": "17.0.2",
    "reactotron-react-native": "^5.0.0",
    "reactotron-redux": "^3.1.3",
    "ts-jest": "^27.1.3",
    "ts-toolbelt": "^8.0.7",
    "typescript": "^4.3.5"
  }

---

.detoxrc.json

{
  "testRunner": "jest",
  "runnerConfig": "e2e/config.json",
  "skipLegacyWorkersInjection": true,
  "apps": {
    "ios": {
      "type": "ios.app",
      "binaryPath": "./ios/build/Build/Products/Release-iphonesimulator/tabella2.app",
      "build": "xcodebuild -workspace ios/tabella2.xcworkspace -configuration release -scheme tabella2 -sdk iphonesimulator -derivedDataPath ios/build"
    },
    "android": {
      "type": "android.apk",
      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
    }
  },
  "devices": {
    "simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 13"
      }
    },
    "emulator": {
      "type": "android.emulator",
      "device": {
        "avdName": "Pixel_3a_API_30_x86"
      }
    }
  },
  "configurations": {
    "ios": {
      "device": "simulator",
      "app": "ios"
    },
    "android": {
      "device": "emulator",
      "app": "android"
    }
  }
}

---

The error that I get is:

Cannot find module 'jasmine' from 'init.ts'

I already tried adding @types/jasmine, as suggested in an old discussing in another repo, but no luck. I'm running out of ideas now. Can someone please help me?