jQuery is not defined

[dwilches]

I'm setting up jscutlery in my project, and when I execute ng run my-project-here:ct I get the following error:

  1) An uncaught error was detected outside of a test:
     ReferenceError: The following error originated from your test code, not from Cypress.

  > jQuery is not defined

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
      at http://localhost:50957/__cypress/src/scripts.js:7:200
      at http://localhost:50957/__cypress/src/scripts.js:7:208

  (Results)
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  1                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     sample.cy-spec.ts                                                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

There is no other information in the error like what code was trying to use jQuery. This error happened while trying to execute the provided test case (I have no other tests).

what can this be caused by? Can the logs be improved to help troubleshooting this on my side?

Thanks.

[edbzn]

Can you provide more information on your workspace? Are you using Angular CLI, which version? jQuery is used internally by Cypress to interact with the DOM, but it should be transparent for you.

[dwilches]

Hello,

Sure. Here is the version information from Angular CLI:

$ ng version                                                                                                                                                                                          ‹ cypress-cuttlery ›
Your global Angular CLI version (13.0.1) is greater than your local version (12.2.6). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 12.2.6
Node: 14.18.0
Package Manager: npm 6.14.15
OS: darwin x64

Angular: 12.2.6
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, material-moment-adapter, platform-browser
... platform-browser-dynamic, router, upgrade

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.6
@angular-devkit/build-angular   12.2.6
@angular-devkit/core            12.2.6
@angular-devkit/schematics      12.2.6
@schematics/angular             12.2.6
rxjs                            6.5.5
typescript                      4.3.5

And other version information from my package.json:

~/Repos/console $ grep angular package.json                                                                                                                                                                           ‹ cypress-cuttlery ›
    "@angular/animations": "~12.2.6",
    "@angular/cdk": "^12.2.6",
    "@angular/common": "~12.2.6",
    "@angular/compiler": "~12.2.6",
    "@angular/core": "~12.2.6",
    "@angular/forms": "~12.2.6",
    "@angular/material": "^12.2.6",
    "@angular/material-moment-adapter": "^12.2.6",
    "@angular/platform-browser": "~12.2.6",
    "@angular/platform-browser-dynamic": "~12.2.6",
    "@angular/router": "~12.2.6",
    "@angular/upgrade": "^12.2.6",
    "@jscutlery/cypress-angular": "^0.8.4",
    "@uirouter/angularjs": "^1.0.27",
    "angular": "^1.8.2",
    "angular-clipboard": "^1.5.0",
    "angular-foundation": "^0.8.0",
    "angular-messages": "^1.7.6",
    "angular-sanitize": "^1.7.6",
    "@angular-devkit/build-angular": "~12.2.6",
    "@angular/cli": "~12.2.6",
    "@angular/compiler-cli": "~12.2.6",
    "@types/angular": "^1.6.53",

Our project is a hybrid between Angular.js and Angular, although the test I'm running is the one that JsClutery created, so I don't expect it to be using my code at all:

import { Component } from "@angular/core";
import { mount } from "@jscutlery/cypress-angular/mount";

@Component({
    template: `<h1>👋 Hello!</h1>`,
})
export class GreetingsComponent {}

describe("greetings", () => {
    it("should say hello", () => {
        mount(GreetingsComponent);
        cy.get("h11").contains("👋 Hello!");
    });
});