Testing library throws uncaught error

[vaclavGabriel]

• cypress-testing-library version: 9.0.0
• node version: 18.12.1
• npm (or yarn) version: 9.2.0

Relevant code or config

What you did:
I am unable to run Cypress test after upgrading to Cypress version 12+ and @testing-library/cypress version 9.0.0 due to an uncaught error from the Cypress testing library.

An uncaught error was detected outside of a test
No commands were issued in this test.
The following error originated from your test code, not from Cypress.

> Cypress.Commands.addQuery() is used to create new queries, but findAllByLabelText is an existing Cypress command or query, or is reserved internally by Cypress.
If you want to override an existing command or query, use Cypress.Commands.overrideQuery() instead.
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.
[node_modules/@testing-library/cypress/dist/add-commands.js:8:1]
   6 |   command
   7 | }) => {
>  8 |   Cypress.Commands.addQuery(name, command);
     | ^
   9 | });
  10 | Cypress.Commands.add('configureCypressTestingLibrary', config => {
  11 |   (0, _.configure)(config); 

What happened:

Reproduction repository:

Problem description:

Suggested solution:

[seanmcquaid]

Seeing this as well!

[tracy-ash]

yup. back for me, too

[seanmcquaid]

FWIW, I resolved this by upgrading to the newest version of Cypress.

[tracy-ash]

i'm using:

  "devDependencies": {
    "@testing-library/cypress": "^9.0.0",
    "cypress": "^12.3.0"
  }

[seanmcquaid]

Interesting, that's the same setup as me. How are you actually importing in the commands for Cypress Testing Library?

[tracy-ash]

cypress/support/commands.js:

import "@testing-library/cypress/add-commands";
import * as dotenv from "dotenv";
dotenv.config();

// login
Cypress.Commands.addQuery("login", ({ url, password }) => {
  ...
  return;
});

cypress/support/index.js:

import "./commands";

cypress/e2e/spec-mytests.js

require("../support/index");

[tracy-ash]

@seanmcquaid how are you importing commands?

[trc-mathieu]

I got this error as well but turns out I was importing twice import "@testing-library/cypress/add-commands"; Make sure you import only in cypress/support/commands.js

[seanmcquaid]

@tracy-ash - I don't think you need to import in your support directly to your tests? Let me try to get you my current set up in a bit

[vaclavGabriel]

I am using the newest versions of both Cypress and @testing-library/cypress. And commands are imported only in the commands.js file: import '@testing-library/cypress/add-commands'

[tracy-ash]

I finally fixed this.
I'd been using Cypress.Commands.addQuery instead of Cypress.Commands.add

Thanks

[apolonskiy]

I'm still seeing it after upgrade to cypress v.12.5 (latest atm) and @testing-library/cypress v9.0.0. I don't use addQuery in my commands.js and still it fails to start tests. Would appreciate some help.

[9jaGuy]

@apolonskiy confirm how many times you are importing the file (eg. might be commands) that is importing @testing-library/cypress/add-commands because that can cause this error. @testing-library/cypress/add-commands can only be init once.

[apolonskiy]

@9jaGuy I only import it once in cypress/support/commands.js this format import '@testing-library/cypress/add-commands'. Changing code in dependencies from ...addQuery to just ...add Resolves it...

[vaclavGabriel]

I solved this issue by removing all exports from the cypress/support/commands.ts file. Now, I have there only imports and commands.

[apolonskiy]

@vaclavGabriel I do not have any export statements in my commands.js already.

[vaclavGabriel]

What does your e2e.js file look like?

[apolonskiy]

@vaclavGabriel
`
import {isDev, isRack, VIEW_PORT} from "../utilities";
import "@shelex/cypress-allure-plugin";
import {configure} from "@testing-library/cypress";

let allure;
try {
...
} catch (e) {
...
}

Cypress.on("uncaught:exception", err => {
...
});

export const setTestCookies = () => {
...
};

before(function () {
...
});

beforeEach(function () {
...
});

// bypass for pending cypress suites displaying at allure
after(function () {});

// Import commands.js using ES2015 syntax:
import "./commands";

require("cypress-xpath");
require("@cypress/skip-test/support");
`

[vaclavGabriel]

I don't think you need this line: import {configure} from "@testing-library/cypress"; as you are already importing the testing library in commands.js 🤔
Also, try to move all imports and requires to the top of the file.

[apolonskiy]

@vaclavGabriel , thanks for help :) However, moving imports, commenting named import from same lib don't change anything (I also need that config for a code below, but I tried removing it - no change.).

import "./commands";
import "cypress-xpath";
import "@cypress/skip-test/support";
import {isDev, isRack, VIEW_PORT} from "../utilities";
import "@shelex/cypress-allure-plugin";
import {configure} from "@testing-library/cypress";

let allure;
try {
  // allure = Cypress.Allure.reporter.getInterface();
  configure({testIdAttribute: "data-element"});
} .......

This does not work either, I mean

import "./commands";
import "cypress-xpath";
import "@cypress/skip-test/support";
import {isDev, isRack, VIEW_PORT} from "../utilities";
import "@shelex/cypress-allure-plugin";
// import {configure} from "@testing-library/cypress";

let allure;
try {
  // allure = Cypress.Allure.reporter.getInterface();
  // configure({testIdAttribute: "data-element"});
}

UDP: I also tried commenting out ALL the other imports, leaving only import from commands once - no change :(

[apolonskiy]

@vaclavGabriel thanks again for help, I finally got to the point...
The problem was, as in your case, in export statement, however not in cypress/support/commands.js file, but in cypress/support/e2e.js.
After I've removed that singe export statement, it got OK.
I honestly think it's a bug somewhere on the side of implementation of this lib.

My case solved.

[jemilox]

I ran into this problem and the solution was to move import '@testing-library/cypress/add-commands' from my commands.ts file to my e2e.ts file.

[BrentFarese]

Ran into this too. It seems like a fault in the library to me. Why developer should need to care about a file having imports and exports (and potentially instantiating the library multiple times) is beyond me.

[EluciusFTW]

This still seems to be open. I have the same issue, tried all suggested solutions without avail. The only thing that 'works' (i.e. all my tests pass), is try-catching the call in the compiled js:

... which is not a solution, obviously.

[LucidityDesign]

Make sure, that the file importing @testing-library/cypress/add-commands is not considered a spec file.
E.g. if you set specPattern: "cypress/e2e/**/*e2e.{js,jsx,ts,tsx}" of if you name your support file support.cy.ts