setupNodeEvents prevents Cypress from running.

Mrblackey commented 2 months ago

Current Behavior

e2e command is failing to run after adding setupNodeEvents to cypress.config.ts file

Expected Behavior

e2e execution should work the same as before adding setupNodeEvents to cypress.config.ts file.

GitHub Repo

https://github.com/nrwl/nx-examples

Steps to Reproduce

1.

diff --git a/apps/cart-e2e/cypress.config.ts b/apps/cart-e2e/cypress.config.ts
index 0316772..b14dd6a 100644
--- a/apps/cart-e2e/cypress.config.ts
+++ b/apps/cart-e2e/cypress.config.ts
@@ -22,5 +22,8 @@ export default defineConfig({
     specPattern: 'src/e2e/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: false,
     testIsolation: false,
+    setupNodeEvents(on, config) {
+      return config;
+    },
   },
 });

nx run cart-e2e:e2e

Nx Report

Node   : 20.10.0
OS     : win32-x64
yarn   : 1.22.19

nx                 : 18.2.0-beta.2
@nx/js             : 18.2.0-beta.2
@nx/jest           : 18.2.0-beta.2
@nx/linter         : 18.2.0-beta.2
@nx/eslint         : 18.2.0-beta.2
@nx/workspace      : 18.2.0-beta.2
@nx/angular        : 18.2.0-beta.2
@nx/cypress        : 18.2.0-beta.2
@nx/devkit         : 18.2.0-beta.2
@nx/eslint-plugin  : 18.2.0-beta.2
@nx/react          : 18.2.0-beta.2
@nrwl/tao          : 18.2.0-beta.2
@nx/web            : 18.2.0-beta.2
@nx/webpack        : 18.2.0-beta.2
typescript         : 5.4.3
---------------------------------------
Community plugins:
@ngrx/component-store : 17.0.1
@ngrx/effects         : 17.0.1
@ngrx/entity          : 17.0.1
@ngrx/operators       : 17.0.0-beta.0
@ngrx/router-store    : 17.0.1
@ngrx/store           : 17.0.1
@ngrx/store-devtools  : 17.0.1

Failure Logs

*  Executing task: yarn nx run cart-e2e:e2e 

yarn run v1.22.19
$ nx run cart-e2e:e2e

> nx run cart-e2e:e2e

DevTools listening on ws://127.0.0.1:52238/devtools/browser/fcdb51e5-307f-42e6-bd54-050853fc75f9

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.6.6                                                                         │
  │ Browser:        Electron 118 (headless)                                                        │
  │ Node Version:   v20.10.0 (C:\Program Files\nodejs\node.exe)                                    │
  │ Specs:          1 found (app.cy.ts)                                                            │
  │ Searched:       src/e2e/**/*.cy.{js,jsx,ts,tsx}                                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  app.cy.ts                                                                       (1 of 1)

  cart
    1) "before all" hook for "should display the header"

  0 passing (371ms)
  1 failing

  1) cart
       "before all" hook for "should display the header":
     CypressError: `cy.visit()` failed trying to load:

http://localhost:4200/cart

The response we received from your web server was:

  > 404: Not Found

This was considered a failure because the status code was not `2xx`.

If you do not want status codes to cause failures pass the option: `failOnStatusCode: false`

Because this error occurred during a `before all` hook we are skipping the remaining tests in the current suite: `cart`
      at <unknown> (http://localhost:4200/__cypress/runner/cypress_runner.js:130958:76)
      at visitFailedByErr (http://localhost:4200/__cypress/runner/cypress_runner.js:130372:12)
      at <unknown> (http://localhost:4200/__cypress/runner/cypress_runner.js:130941:13)
      at tryCatcher (http://localhost:4200/__cypress/runner/cypress_runner.js:1807:23)
      at Promise._settlePromiseFromHandler (http://localhost:4200/__cypress/runner/cypress_runner.js:1519:31)
      at Promise._settlePromise (http://localhost:4200/__cypress/runner/cypress_runner.js:1576:18)
      at Promise._settlePromise0 (http://localhost:4200/__cypress/runner/cypress_runner.js:1621:10)
      at Promise._settlePromises (http://localhost:4200/__cypress/runner/cypress_runner.js:1697:18)
      at _drainQueueStep (http://localhost:4200/__cypress/runner/cypress_runner.js:2407:12)
      at _drainQueue (http://localhost:4200/__cypress/runner/cypress_runner.js:2400:9)
      at Async._drainQueues (http://localhost:4200/__cypress/runner/cypress_runner.js:2416:5)
      at Async.drainQueues (http://localhost:4200/__cypress/runner/cypress_runner.js:2286:14)
  From Your Spec Code:
      at Context.eval (webpack:///./src/e2e/app.cy.ts:4:0)

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        4                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      3                                                                                │
  │ Screenshots:  1                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     app.cy.ts                                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

  (Screenshots)

  -  ...\nx-examples\dist\cypress\apps\cart-e2e\screenshots\app.cy.t     (1280x720)
     s\cart -- should display the header -- before all hook (failed).png

  (Video)

  -  Video output: ...\nx-examples\dist\cypress\apps\cart-e2e\videos\app.cy.ts.mp4

====================================================================================================

  (Run Finished)

       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  app.cy.ts                                374ms        4        -        1        -        3 │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                     374ms        4        -        1        -        3

Warning: command "cypress run" exited with non-zero status code
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 

 NX   Ran target e2e for project cart-e2e (11s)

   ×  1/1 failed
   √  0/1 succeeded [0 read from cache]

View structured, searchable error logs at https://nx.app/runs/eV3NE1wvLb

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Package Manager Version

No response

Operating System

[ ] macOS
[ ] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

Workaround:

Place the setupNodeEvents property first:

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      return config;
    },
    ...nxE2EPreset(__filename, {

Edit:

Seems like the workaround helps with running Cypress, but the tests are failing because of

cy.task('someTask') failed with the following error:

The 'task' event has not been registered in the setupNodeEvents method. You must register it before using cy.task()

AgentEnder commented 2 months ago

The nxE2EPreset has it's own setupNodeEvents that we use to launch your server to hit during E2E tests. If you need to customize it, you could call it inside your custom setup node events... e.g.

const nxPreset = nxE2EPreset(__filename, {/*....*/})

export default defineConfig({
  e2e: {
    ...nxPreset,
    setupNodeEvents(on, config) {
      config = nxPreset.setupNodeEvents(on, config);
      return config;
    },
  }
});

Mrblackey commented 2 months ago

The nxE2EPreset has it's own setupNodeEvents that we use to launch your server to hit during E2E tests. If you need to customize it, you could call it inside your custom setup node events... e.g.
const nxPreset = nxE2EPreset(__filename, {/*....*/})

export default defineConfig({
  e2e: {
    ...nxPreset,
    setupNodeEvents(on, config) {
      config = nxPreset.setupNodeEvents(on, config);
      return config;
    },
  }
});

Thanks.

github-actions[bot] commented 1 month ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx