[Regression] TypeScript can't compile tests using Testcafe version 1.19.0 after updating jest and @types/jest

What is your Scenario?

Angular Project using

• jest v28.1.1 (@types/jest v28.1.3) for unit-testing
• testcafe v1.19.0 for e2e-testing

PS 2e2 tests should be in a separate project, I know 😅 found the project like this and haven’t gotten the time to split it so far

What is the Current behavior?

When our dependency manager updates to jest v28.1.2 and @types/jest v28.1.4 the e2e-tests break with the following error:

Error: TypeScript compilation failed.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (416, 62): ']' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (416, 65): ';' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (416, 70): ';' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (416, 94): ';' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (416, 95): Declaration or statement expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (420, 50): ']' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (420, 53): ';' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (420, 58): ';' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (420, 101): ';' expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (420, 102): Declaration or statement expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (420, 109): Declaration or statement expected.
/builds/i2TTw6dh/4/2kio/2kio-portal-frontend/node_modules/.pnpm/@types+jest@28.1.4/node_modules/@types/jest/index.d.ts (1379, 1): Declaration or statement expected.

This issue was originally reported in https://github.com/DevExpress/testcafe/issues/4435 and https://github.com/DevExpress/testcafe/issues/4405 and it has been fixed before. Now it re-emerged with the new versions of jest and @types/jest.

IMPORTANT: The workaround of setting “customCompilerModulePath” worked for us.

What is the Expected behavior?

e2e-tests should run.

What is your public website URL? (or attach your complete example)

None.

What is your TestCafe test code?

Too big and irrelevant since it was working before the update.

Your complete configuration file

package.json

{
  "name": "portal",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "cross-env NODE_ENV=production ng build --configuration production",
    "test": "ng test",
    "lint:check": "ng lint portal && pnpm testcafe:lint && stylelint \"src/**/*.(html|scss)\" && prettier --check \"src/**/*.(html|scss)\"",
    "lint:fix": "ng lint portal --fix && stylelint \"src/**/*.(html|scss)\" --fix && prettier --check \"src/**/*.(html|scss)\" --write",
    "testcafe:lint": "eslint -c ./.eslintrc-testcafe.json --ext .ts ./testcafe/tests/*.ts",
    "testcafe:server": "browser-sync dist --port 5000 --single --no-open --no-notify",
    "testcafe:run": "testcafe chrome --app \"pnpm testcafe:server\"",
    "testcafe:dev": "testcafe chrome"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.0.5",
    "@angular/cdk": "14.0.3",
    "@angular/common": "14.0.5",
    "@angular/compiler": "14.0.5",
    "@angular/core": "14.0.5",
    "@angular/forms": "14.0.5",
    "@angular/localize": "14.0.5",
    "@angular/material": "14.0.3",
    "@angular/platform-browser": "14.0.5",
    "@angular/platform-browser-dynamic": "14.0.5",
    "@angular/router": "14.0.5",
    "@auth0/angular-jwt": "5.0.2",
    "@browser-logos/chrome": "1.0.18",
    "@browser-logos/edge": "2.0.5",
    "@browser-logos/firefox": "3.0.9",
    "@browser-logos/safari": "2.1.0",
    "@datadog/browser-rum": "4.2.0",
    "@ngrx/component": "13.0.2",
    "@ngrx/effects": "13.0.2",
    "@ngrx/entity": "13.0.2",
    "@ngrx/store": "13.0.2",
    "@ngrx/store-devtools": "13.0.2",
    "@sentry/browser": "6.17.9",
    "@sentry/hub": "6.17.9",
    "ag-grid-angular": "26.2.0",
    "ag-grid-community": "26.2.1",
    "angular-google-tag-manager": "1.5.0",
    "angular-oauth2-oidc": "13.0.1",
    "basicscroll": "3.0.4",
    "bowser": "2.11.0",
    "chartist": "0.11.4",
    "core-js": "3.20.3",
    "dayjs": "1.9.6",
    "fast-copy": "2.1.3",
    "file-saver": "2.0.5",
    "filesize": "8.0.7",
    "hammerjs": "2.0.8",
    "jest-canvas-mock": "2.4.0",
    "launchdarkly-js-client-sdk": "2.20.2",
    "license-report": "5.0.2",
    "lottie-web": "5.8.1",
    "maplibre-gl": "2.1.9",
    "ngx-lottie": "8.0.1",
    "ngx-plyr": "4.0.0",
    "ngx-tailwind": "3.0.0",
    "plyr": "3.6.12",
    "rxjs": "7.5.5",
    "sha3": "2.1.4",
    "tailwindcss": "3.0.24",
    "tslib": "2.3.1",
    "zone.js": "0.11.6"
  },
  "devDependencies": {
    "@angular-builders/jest": "14.0.0",
    "@angular-devkit/build-angular": "14.0.5",
    "@angular-eslint/builder": "13.5.0",
    "@angular-eslint/eslint-plugin": "13.5.0",
    "@angular-eslint/eslint-plugin-template": "13.5.0",
    "@angular-eslint/schematics": "13.5.0",
    "@angular-eslint/template-parser": "13.5.0",
    "@angular/cli": "14.0.5",
    "@angular/compiler-cli": "14.0.5",
    "@angular/language-service": "14.0.5",
    "@tailwindcss/aspect-ratio": "latest",
    "@tailwindcss/line-clamp": "latest",
    "@testing-library/dom": "8.14.0",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/testcafe": "4.4.1",
    "@types/basicscroll": "3.0.1",
    "@types/chartist": "0.11.1",
    "@types/file-saver": "2.0.5",
    "@types/geojson": "7946.0.8",
    "@types/hammerjs": "2.0.41",
    "@types/jest": "28.1.4",
    "@types/jsonwebtoken": "8.5.8",
    "@types/mapbox__point-geometry": "0.1.2",
    "@types/mapbox__vector-tile": "1.3.0",
    "@types/node": "16.11.43",
    "@types/webpack-env": "1.17.0",
    "@typescript-eslint/eslint-plugin": "5.30.5",
    "@typescript-eslint/parser": "5.30.5",
    "@typescript-eslint/typescript-estree": "5.30.5",
    "autoprefixer": "10.4.7",
    "browser-sync": "2.27.10",
    "codelyzer": "6.0.2",
    "cross-env": "7.0.3",
    "eslint": "8.18.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsdoc": "37.9.7",
    "eslint-plugin-json": "3.1.0",
    "eslint-plugin-no-only-tests": "2.6.0",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "eslint-plugin-prettier": "4.1.0",
    "eslint-plugin-testcafe": "0.2.1",
    "jest": "28.1.2",
    "jest-junit": "13.2.0",
    "jest-preset-angular": "12.1.0",
    "jsonwebtoken": "8.5.1",
    "material-design-icons": "3.0.1",
    "mock-socket": "9.1.5",
    "ng-mocks": "13.5.2",
    "postcss": "8.4.14",
    "postcss-html": "1.4.1",
    "prettier": "2.7.1",
    "prettier-eslint": "13.0.0",
    "pretty-format": "28.1.1",
    "sass": "1.53.0",
    "stylelint": "14.9.1",
    "stylelint-config-html": "1.0.0",
    "stylelint-config-prettier": "9.0.3",
    "stylelint-config-standard-scss": "3.0.0",
    "testcafe": "1.19.0",
    "ts-jest": "28.0.5",
    "ts-loader": "9.3.1",
    "ts-mockito": "2.6.1",
    "ts-node": "10.8.2",
    "typescript": "4.7.4",
    "utility-types": "3.10.0",
    "wait-on": "6.0.1"
  },
  "browserslist": [
    "defaults",
    "not IE 11",
    "not dead"
  ]
}

tsconfig.json

{
    "include": ["src/**/*.ts"],
    "compileOnSave": false,
    "compilerOptions": {
        "strict": true,
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2020",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2020",
        "esModuleInterop": true,
        "typeRoots": ["node_modules/@types"],
        "resolveJsonModule": true,
        "noUnusedLocals": true,
        "paths": {
            "...": ["OMITTED"]
         }
    },
    "angularCompilerOptions": {
        "allowSyntheticDefaultImports": true,
        "enableIvy": true,
        "fullTemplateTypeCheck": true
    }
}

.testcaferc.json with the customCompilerModulePath workaround

{
    "debugOnFail": false,
    "disableMultipleWindows": true,
    "skipJsErrors": true,
    "src": "testcafe/tests/*.ts",
    "selectorTimeout": 2000,
    "assertionTimeout": 2000,
    "clientScripts": [
        { "module": "@testing-library/dom/dist/@testing-library/dom.umd.js" }
    ],
    "compilerOptions": {
        "typescript": {
            "customCompilerModulePath": "../../../../typescript",
            "options": {
                "esModuleInterop": true,
                "baseUrl": "./",
                "paths": {
                    "...": ["OMITTED"]
                }
            }
        }
    }
}

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

See “What is your Scenario?”

TestCafe version

1.19.0

Node.js version

17.1.0

Command-line arguments

testcafe chrome -f “…”

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

The workaround of setting “customCompilerModulePath” worked for us.

[Aleksey28]

I found the cause of this problem. It takes place because the TS version 3.* is installed in Testcafe by default. We already have a PR with an updated TS. So, you have three options:

1. Wait until we publish the framework with the updated version of the TS
2. Install an older version @types/jest, e.g. 28.1.2
3. Manually set advanced version of TS

[Aleksey28]

Hi @jaedle,

Thank you for your investigation. You wrote detailed instructions for the third option described in https://github.com/DevExpress/testcafe/issues/7137#issuecomment-1181783159. Also, you and other people can use other workarounds from this comment.