nx: Cypress open fails with "Please provide an absolute path to a tsconfig.json as cypressConfig.env.tsConfig"

Is the any plan to change something here? Using ng e2e test-e2e or cypress cli is better option than only ng e2e test-e2e

Hi @CSchulz, you can run e2e tests with ng e2e test-e2e, or you can use yarn/npm if you don’t use a global ng bin.

We don’t recommend using the cypress cli directly since will not have the correct config.

TL;DR aka the solution

Add below to your project-e2e/cypress.json file (no need to do it index.js as https://github.com/nrwl/nx/issues/1707#issuecomment-520896834 suggests):

{
  "env": {
    "tsConfig": "tsconfig.json"
  }
}

Debug summary

1. You get error: Error: Please provide an absolute path to a tsconfig.json as cypressConfig.env.tsConfig

2. You follow advice from https://github.com/nrwl/nx/issues/1707#issuecomment-520896834 . Now you get TypeError: path argument is required to res.sendFile.

3. Based on https://github.com/nrwl/nx/issues/1707#issuecomment-863600209 suggestion, you remove changes to you index.js and add below to your cypress.json:

  "env": {
      "tsConfig": "./tsconfig.json"
  }

Now you get error TypeError: err.replace is not a function. (if you added ./ like me - otherwise you might have success here.)

1. By going to node_modules/@cypress/webpack-preprocessor/index.js:230:16 as mentioned in above error stack and logging the error like shown in screenshot, you see the actual error needing fixing: TS18002: The 'files' list in config file 'tsconfig.json' is empty..

2. You search the error and find the solution here: https://github.com/TypeStrong/ts-loader/issues/405#issuecomment-330108362

3. You remove the ‘./’ from “tsConfig”: “./tsconfig.json” you added earlier in cypress.json, so it becomes "tsConfig": "tsconfig.json".

4. Et viola - tests now work. Hopefully…

Here is another use case: I wish to run tests against deployed app without building it first, e.g. by passing baseUrl

Hi @CSchulz, you can run e2e tests with ng e2e test-e2e, or you can use yarn/npm if you don’t use a global ng bin.

We don’t recommend using the cypress cli directly since will not have the correct config.

How do you do then to launch e2e test on a CI ? I haven’t seen any example to do this and the only way I’ve seen personally is to try the official Cypress approach using cypress run command as the ng e2e fail on CI

Changing the plugin.js to set the tsconfig.json if not set works partial:

  on('file:preprocessor', () => {
    if (!config.env.tsConfig) {
      config.env.tsConfig = config.fileServerFolder + '/tsconfig.json';
    }
    return preprocessTypescript(config);
  });

It shows all tests now, but if you run a test now, it fails with another message:

GET /__/ 200 29.461 ms - -
GET /__cypress/runner/cypress_runner.css 200 22.230 ms - -
GET /__cypress/runner/cypress_runner.js 200 500.607 ms - -
GET /__cypress/static/favicon.ico 200 2.382 ms - -
GET /__cypress/iframes/integration/app.spec.ts 200 8.190 ms - 613
GET /__cypress/runner/fonts/fontawesome-webfont.woff2?v=4.7.0 200 4.772 ms - 77160
TypeError: path argument is required to res.sendFile
    at ServerResponse.sendFile (Cypress.app/Contents/Resources/app/packages/server/node_modules/express/lib/response.js:411:11)
    at tryCatcher (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at ret (<anonymous>:14:23)
    at Cypress.app/Contents/Resources/app/packages/server/lib/controllers/spec.js:29:16
    at tryCatcher (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:510:31)
    at Promise._settlePromise (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:567:18)
    at Promise._settlePromise0 (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:612:10)
    at Promise._settlePromises (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:691:18)
    at Async._drainQueue (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:789:20)
    at tryOnImmediate (timers.js:751:5)
    at processImmediate [as _immediateCallback] (timers.js:722:5)

GET /__cypress/tests?p=src/integration/app.spec.ts-218 200 6.698 ms - 165
HEAD / - - ms - -
HEAD / - - ms - -
HEAD / - - ms - -

I am using Cypress 3.4.1.

to solve the “path argument is required to res.sendFile” error. I needed to update the path for fileServerFolder in the cypress.json config. this path should point to the tsconfig.json in the e2e project folder.

@yjcyun hey I have solved the problem but i don’t know the solution anymore. Find me on https://gitter.im/cypress-io/cypress so i can help you there