Can't run Cypress tests into Docker container.

Current Behavior

it seems that I cannot run Cypress tests into a Docker container as shown here https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/.

Expected Behavior

I would hope to run tests either with the @nrwl/cypress-builder or through cypress run through a docker container. I can also assure the Cypress tests run fine in case of an Angular workspace/app (without @nwrl/nx installed).

Failure Logs

$ docker run -v /home/dc-user/workbench/:/e2e -w /e2e --entrypoint=cypress cypress/included:4.12.1 run --project ./apps/demo-app-e2e/ --config-file cypress.json
The function exported by the plugins file threw an error.

We invoked the function exported by `/e2e/apps/demo-app-e2e/src/plugins/index.js`, but it threw an error.

 Error: Please provide an absolute path to a tsconfig.json as cypressConfig.env.tsConfig
    at preprocessTypescript (/e2e/node_modules/@nrwl/cypress/src/plugins/preprocessor.js:18:15)
    at module.exports (/e2e/apps/demo-app-e2e/src/plugins/index.js:21:27)
    at /root/.cache/Cypress/4.12.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:78:12
    at tryCatcher (/root/.cache/Cypress/4.12.1/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/root/.cache/Cypress/4.12.1/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/method.js:39:29)
    at load (/root/.cache/Cypress/4.12.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:75:7)
    at EventEmitter.<anonymous> (/root/.cache/Cypress/4.12.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:231:5)
    at EventEmitter.emit (events.js:210:5)
    at process.<anonymous> (/root/.cache/Cypress/4.12.1/Cypress/resources/app/packages/server/lib/plugins/util.js:19:22)
    at process.emit (events.js:210:5)
    at process.emit (/root/.cache/Cypress/4.12.1/Cypress/resources/app/packages/server/node_modules/source-map-support/source-map-support.js:495:21)
    at emit (internal/child_process.js:876:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

Environment

  @nrwl/angular : 9.2.4
  @nrwl/cli : 9.2.4
  @nrwl/cypress : 9.2.4
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 9.2.4
  @nrwl/linter : Not Found
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.2.4
  @nrwl/web : Not Found
  @nrwl/workspace : 9.2.4
  typescript : 3.8.3

[shlomiassaf]

@brunano21 OK, I figured this out.

It’s not complicated as we thought it was.

From the ROOT of your work space:

docker run -it -v $PWD:/workspace -w /workspace --entrypoint=./node_modules/.bin/nx cypress/included:4.12.1 e2e ngrid-dev-app-e2e --dev-server-target --base-url=http://host.docker.internal:4200

Basically, the -v maps between the folders of the container and the host, it’s not a copy, pure hot link. So we can map it all, including node modules, and just build it on the container.

Note that on special scenarios, when using npm packages which require OS compilation (node GYP) and if the host/container are different (win/linux) you might have issues, I didn’t run into any here.

[brunano21]

If there is built in TS support, try using the webpack preprocessor directly:

 
module.exports = (on) => {
  const options = {
    // send in the options from your webpack.config.js, so it works the same
    // as your app's code
    webpackOptions: require('../../webpack.config'),
    watchOptions: {},
  }
 
  on('file:preprocessor', webpackPreprocessor(options))
}

https://www.npmjs.com/package/@cypress/webpack-preprocessor

Note that you might not have support for TS path mappings, depending on the implementation

I’d like to avoid any custom configuration or running an npm install into the docker container.