Nx: New nx workspace doesn't support custom cypress commands

Created on 22 Jul 2019 · 15Comments · Source: nrwl/nx

_Please make sure you have read the submission guidelines before posting an issue_

Expected Behavior

Adding a custom Cypress command with the generated schematics should not cause an error when the tests run.

Current Behavior

The custom commands aren't registered to due supportFile: false in the cypress.json file.

Failure Information (for bugs)

Adding the minimal steps to reproduce here:
https://github.com/ca136/cypress-nx-commands/commit/d9991391140e6aa826b9242ab70ad04bfaf6bb40

Context

Please provide any relevant information about your setup:

Used nx 8.2.0

A minimal reproduce scenario using allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
see github repo above

Failure Logs

Either:

[tsl] ERROR in /Users/caleb.amsden/myapp/apps/myapp-e2e/src/integration/app.spec.ts(6,6)
      TS2339: Property 'login' does not exist on type 'Chainable<undefined>'.

Or:

The support file is missing or invalid.

Your `supportFile` is set to `/Users/caleb.amsden/myapp/apps/myapp-e2e/src/support/index`, but either the file is missing or it's invalid. The `supportFile` must be a `.js` or `.coffee` file or, if you're using a preprocessor plugin, it must be supported by that plugin.

Correct your `cypress.json`, create the appropriate file, or set `supportFile` to `false` if a support file is not necessary for your project.

Learn more at https://on.cypress.io/support-file-missing-or-invalid

Other

Any other relevant information that will help us help you.

testing tools bug

Source

ca136

👍7

All 15 comments

I had this issue, too, after upgrading to nx 8.
You can specifically set the path to your support/index.ts in cypress.json.
to me it looks like

"supportFile": "./src/support/index.ts",

And it works for me.

yglin on 24 Jul 2019

You can specifically set the path

Yup, please do this manually for the time being.

@bcabanes Do you remember why this was changed in this PR? https://github.com/nrwl/nx/pull/853

FrozenPandaz on 27 Jul 2019

I think it might be more of a documentation issue or just user error. Something broke with our typings.d.ts for custom commands during the migration, but moving the typings inside commands.ts eventually worked.

Seems like Cypress custom commands and TypeScript don't play super well together at the moment. Feel free to close to reduce noise @FrozenPandaz!

ca136 on 27 Jul 2019

@FrozenPandaz after adding custom commands, for instance :
Cypress.Commands.add('login', login) and run ng test <project> using Karma
got an error Cannot use namespace 'Cypress' as a value.

Amakaev on 24 Sep 2019

@FrozenPandaz @bcabanes any update on this?

vsavkin on 27 Sep 2019

I was going to open a related issue to this so I add my information in here.

There should be a support file for custom commands typing or documentation in how to do it yourself.

If you open commands.ts and you write a custom one, say:

const approverLogin = () => {
  return cy.get('#foo');
};

Cypress.Commands.add('approverLogin', approverLogin);

Something silly, but just to get the point.

You get an expected Property 'approverLogin' does not exist on type 'cy'.ts(2339) if you try to use it.

Some pages recommends you to create a index.d.ts at support/ to do something like:

declare namespace Cypress {
  interface Chainable {
    approverLogin: Chainable;
  }
}

and perhaps wire it with a typeRoots in the tsconfig file. That doesn't fix it. The typing I wrote may be wrong, but it is still not something typescript would find. Moving the declaration to commands.ts would probably make it work but I believe that NX should offer a specific d.ts file for custom commands.

EDIT: Following the official cypress recommendation:

https://docs.cypress.io/guides/tooling/typescript-support.html#Transpiling-TypeScript-test-files

VScode starts recognizing the command, the fact that it has parameters but when running the tests, it fails saying the method doesn't exist (but if you leave out the param, running the tests will fail saying that there was a parameter expected but got 0).

So not even using the /// <reference tag (the idea is not to use it either)

Foxandxss on 4 Oct 2019

@FrozenPandaz @vsavkin I created a PR adding the capability and default examples.

bcabanes on 4 Oct 2019

Not a big fan of that solution tho. I would love to have a separate d.ts file. To keep things simple, but I guess that would work as well.

Foxandxss on 5 Oct 2019

As @juristr mentions in another place, He found a solution:

If inside commands.ts you do something like:

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
    */
    dataCy(value: string): Chainable<Element>
  }
}


Cypress.Commands.add('dataCy', (value) => {
  return cy.get(`[data-cy=${value}]`)
});

VScode will say, hey, there is a new command, I won't give you a red wiggle anymore when you use it. Now, running ng e2e will say... what is that dataCy I don't know about? But if inside the spec file where you use it, you do a import ../support (or your correct path to the support folder), it will actually find it and work.

So you need to do two extra steps for a command. Create the type and import the file with the type where you use it. In a good world you only need to do the former and even better if it is in its own d.ts file.

Foxandxss on 5 Oct 2019

👍1

I had this issue, too, after upgrading to nx 8.
You can specifically set the path to your support/index.ts in cypress.json.
to me it looks like

"supportFile": "./src/support/index.ts",

And it works for me.
@FrozenPandaz

I am facing the same issue, I have manually entered my support file path which is like this
"supportFile": "cypress/support/index.ts"
When I am running my cypress tests using test runner (ng e2e --watch) the tests are running fine.
but when I am trying to run my tests using command line (ng e2e) it's opening the browser for 4 minutes and not running any tests. I am just seeing the window in the below screenshot for 4 mins without any test execution.

My folder structure contains .d.ts files for interfaces and .ts files for custom commands

Can some help me with this issue, I am actually stuck over here.

prudhvidandamudi on 21 Oct 2019

👍1

Hi @prudhvidandamudi
We are looking currently at this issue.

bcabanes on 21 Oct 2019

Hi @bcabanes
Thanks for replying. Is there any specific timeline for this issue to be fixed.
Our team is blocked here, as our tests are failing when we are running through CI, as we are using the command line to trigger our tests.

prudhvidandamudi on 22 Oct 2019

@FrozenPandaz can you please release this fix?

EugeneCh on 20 Nov 2019

With @nrwl/[email protected] the problem continuied to exist for me.

Error Message

Oops...we found an error preparing this test file:

  src/integration/app.spec.ts

The error was:

<...>/apps/frontend-e2e/src/integration/app.spec.ts
ERROR in <...>/apps/frontend-e2e/src/integration/app.spec.ts(22,14):
TS2339: Property 'matchImageSnapshot' does not exist on type 'Chainable<JQuery<HTMLElement>>'.

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

Solution

commands.ts:

export {}

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      login(email: string, password: string): void;
      matchImageSnapshot(): Chainable<Subject>;
      matchImageSnapshot(name: string): Chainable<Subject>;
      matchImageSnapshot(options: any): Chainable<Subject>;
      matchImageSnapshot(name: string, options: any): Chainable<Subject>;
    }
  }
}

Version Info

$ node_modules/.bin/nx --version
8.12.0

$ node_modules/.bin/cypress --version
Cypress package version: 3.8.3
Cypress binary version: 3.8.3

$ node_modules/.bin/tsc --version
Version 3.5.3

"@cypress/[email protected]":
  version "0.4.1"
  resolved "https://<npm>/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
  integrity sha1-p3SS9LEdzHxEajSz4ochr9M8ZCo=
  dependencies:
    chalk "^1.1.3"
    cli-cursor "^1.0.2"
    date-fns "^1.27.2"
    figures "^1.7.0"

"@cypress/webpack-preprocessor@~4.1.0":
  version "4.1.1"
  resolved "https://<npm>/@cypress/webpack-preprocessor/-/webpack-preprocessor-4.1.1.tgz#3c0b5b8de6eaac605dac3b1f1c3f5916c1c6eaea"
  integrity sha512-SfzDqOvWBSlfGRm8ak/XHUXAnndwHU2qJIRr1LIC7j2UqWcZoJ+286CuNloJbkwfyEAO6tQggLd4E/WHUAcKZQ==
  dependencies:
    bluebird "3.7.1"
    debug "4.1.1"
  optionalDependencies:
    "@babel/core" "^7.0.1"
    "@babel/preset-env" "^7.0.0"
    babel-loader "^8.0.2"

"@cypress/[email protected]":
  version "1.2.4"
  resolved "https://<npm>/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
  integrity sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==
  dependencies:
    debug "^3.1.0"
    lodash.once "^4.1.1"


"@nrwl/[email protected]":
  version "8.12.0"
  resolved "https://<npm>/@nrwl/cypress/-/cypress-8.12.0.tgz#e98fee9da0229e044242e88b8a573f7840261a29"
  integrity sha512-g8qT7Q7IvR1axwQDkmq/PC78JkwygruhIb9cnZA+dLwpkKSO7tiuXzTlyMczEZwsmivkk2+eUgUi4v3WZNhLIA==
  dependencies:
    "@angular-devkit/architect" "0.803.23"
    "@angular-devkit/core" "8.3.23"
    "@cypress/webpack-preprocessor" "~4.1.0"
    fork-ts-checker-webpack-plugin "^3.1.1"
    tree-kill "1.2.2"
    ts-loader "^5.3.1"
    tsconfig-paths-webpack-plugin "3.2.0"
    webpack-node-externals "1.7.2"


webpack-core@^0.6.8:
  version "0.6.9"
  resolved "https://<npm>/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
  integrity sha1-/FcViMhVjad76e+23r3Fo7FyvcI=
  dependencies:
    source-list-map "~0.1.7"
    source-map "~0.4.1"

[email protected], webpack-dev-middleware@^3.7.2:
  version "3.7.2"
  resolved "https://<npm>/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
  dependencies:
    memory-fs "^0.4.1"
    mime "^2.4.4"
    mkdirp "^0.5.1"
    range-parser "^1.2.1"
    webpack-log "^2.0.0"

[email protected]:
  version "3.9.0"
  resolved "https://<npm>/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz#27c3b5d0f6b6677c4304465ac817623c8b27b89c"
  integrity sha512-E6uQ4kRrTX9URN9s/lIbqTAztwEPdvzVrcmHE8EQ9YnuT9J8Es5Wrd8n9BKg1a0oZ5EgEke/EQFgUsp18dSTBw==
  dependencies:
    ansi-html "0.0.7"
    bonjour "^3.5.0"
    chokidar "^2.1.8"
    compression "^1.7.4"
    connect-history-api-fallback "^1.6.0"
    debug "^4.1.1"
    del "^4.1.1"
    express "^4.17.1"
    html-entities "^1.2.1"
    http-proxy-middleware "0.19.1"
    import-local "^2.0.0"
    internal-ip "^4.3.0"
    ip "^1.1.5"
    is-absolute-url "^3.0.3"
    killable "^1.0.1"
    loglevel "^1.6.4"
    opn "^5.5.0"
    p-retry "^3.0.1"
    portfinder "^1.0.25"
    schema-utils "^1.0.0"
    selfsigned "^1.10.7"
    semver "^6.3.0"
    serve-index "^1.9.1"
    sockjs "0.3.19"
    sockjs-client "1.4.0"
    spdy "^4.0.1"
    strip-ansi "^3.0.1"
    supports-color "^6.1.0"
    url "^0.11.0"
    webpack-dev-middleware "^3.7.2"
    webpack-log "^2.0.0"
    ws "^6.2.1"
    yargs "12.0.5"

webpack-log@^2.0.0:
  version "2.0.0"
  resolved "https://<npm>/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
  dependencies:
    ansi-colors "^3.0.0"
    uuid "^3.3.2"

[email protected]:
  version "4.2.1"
  resolved "https://<npm>/webpack-merge/-/webpack-merge-4.2.1.tgz#5e923cf802ea2ace4fd5af1d3247368a633489b4"
  integrity sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==
  dependencies:
    lodash "^4.17.5"

[email protected]:
  version "1.7.2"
  resolved "https://<npm>/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3"
  integrity sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg==

[email protected], webpack-sources@^1.1.0, webpack-sources@^1.2.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
  version "1.4.3"
  resolved "https://<npm>/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
  dependencies:
    source-list-map "^2.0.0"
    source-map "~0.6.1"

[email protected]:
  version "1.1.0-rc.6"
  resolved "https://<npm>/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.6.tgz#37f6f1264e1eb378e41465a98da80fad76ab8886"
  integrity sha512-Az7y8xTniNhaA0620AV1KPwWOqawurVVDzQSpPAeR5RwNbL91GoBSJAAo9cfd+GiFHwsS5bbHepBw1e6Hzxy4w==
  dependencies:
    webpack-core "^0.6.8"

[email protected]:
  version "4.39.2"
  resolved "https://<npm>/webpack/-/webpack-4.39.2.tgz#c9aa5c1776d7c309d1b3911764f0288c8c2816aa"
  integrity sha512-AKgTfz3xPSsEibH00JfZ9sHXGUwIQ6eZ9tLN8+VLzachk1Cw2LVmy+4R7ZiwTa9cZZ15tzySjeMui/UnSCAZhA==
  dependencies:
    "@webassemblyjs/ast" "1.8.5"
    "@webassemblyjs/helper-module-context" "1.8.5"
    "@webassemblyjs/wasm-edit" "1.8.5"
    "@webassemblyjs/wasm-parser" "1.8.5"
    acorn "^6.2.1"
    ajv "^6.10.2"
    ajv-keywords "^3.4.1"
    chrome-trace-event "^1.0.2"
    enhanced-resolve "^4.1.0"
    eslint-scope "^4.0.3"
    json-parse-better-errors "^1.0.2"
    loader-runner "^2.4.0"
    loader-utils "^1.2.3"
    memory-fs "^0.4.1"
    micromatch "^3.1.10"
    mkdirp "^0.5.1"
    neo-async "^2.6.1"
    node-libs-browser "^2.2.1"
    schema-utils "^1.0.0"
    tapable "^1.1.3"
    terser-webpack-plugin "^1.4.1"
    watchpack "^1.6.0"
    webpack-sources "^1.4.1"

dherges on 31 Jan 2020

I had this issue, too, after upgrading to nx 8.
You can specifically set the path to your support/index.ts in cypress.json.
to me it looks like
"supportFile": "./src/support/index.ts",
And it works for me.
@FrozenPandaz

I am facing the same issue, I have manually entered my support file path which is like this
"supportFile": "cypress/support/index.ts"
When I am running my cypress tests using test runner (ng e2e --watch) the tests are running fine.
but when I am trying to run my tests using command line (ng e2e) it's opening the browser for 4 minutes and not running any tests. I am just seeing the window in the below screenshot for 4 mins without any test execution.

My folder structure contains .d.ts files for interfaces and .ts files for custom commands

Can some help me with this issue, I am actually stuck over here.

I have this same issue. Is there a solution? only difference in my case is - I moved my entire test folder outside apps/. If i reference the cypress.json under apps in workspace.json the tests work fine, but if i reference client specific cypress.json in the standalone folder like below then my test fails after 4 min saying cannot fetch the supportFile. The same test work fine in watch mode.