search

DevExpress / testcafe

A Node.js tool to automate end-to-end web testing.
https://testcafe.io
MIT License
9.81k stars 669 forks source link

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

Closed ma7moudat closed 2 years ago

ma7moudat commented 2 years ago

What is your Scenario?

Angular Project using

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 commented 2 years ago

Hi @ma7moudat,

Please share your full project or at least full configs: package.json, tsconfig.json, and .testcaferc.json (if it exists).

ma7moudat commented 2 years ago

Hi @Aleksey28, I added the config files to the issue description above.

Aleksey28 commented 2 years ago

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
jaedle commented 2 years ago

I guess I have found a workaround!

This is an excempt of my dev dependencies:

    ...
    "@types/jest": "^28.1.6",
    ...
    "testcafe": "^1.20.0",

I have created a new tsconfig tsconfig.testcafe.json:

{
  "compilerOptions": {
    "types": []
  }
}

This config ignores all types on compilation.

And I have configured my testcafe configuration to pick it up .testcaferc.json:

{
  "browsers": "chrome:headless",
  "src": ["**/*.comp-spec.ts"],
  "compilerOptions": {
    "typescript": {
      "configPath": "tsconfig.testcafe.json"
    }
  }
}

I am not sure if this has any side effects as the codebase I am actually working is quite small, but my tests are running fine.

Aleksey28 commented 2 years ago

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.

github-actions[bot] commented 2 years ago

Release v2.0.0-rc.1 addresses this.

github-actions[bot] commented 2 years ago

Release v2.0.0-rc.1 addresses this.