I have problem when I am using Cypress Testing Library

[ahmedelamine]

Current behavior

TypeError:
cy.findByRole is not a function

Desired behavior

I am getting this error even I am using the cypress testing library as in the docs
I have added this line to project cypress/support/commands.js:
import '@testing-library/cypress/add-commands';

And in my test, I use it like this

describe("App", () => {
  it("user can fetch stories", () => {
    cy.visit("http://localhost:3000/");
    
    cy.findByRole("button", { name: /fetch stories/i }).click();
  });
});

then when I run the test I get this error
`TypeError: cy.findByRole is not a function

Test code to reproduce

describe("App", () => {
  it("user can fetch stories", () => {
    cy.visit("http://localhost:3000/");
    
    cy.findByRole("button", { name: /fetch stories/i }).click();
  });
});

Cypress Version

9.1.1

Other

No response

[ahmedelamine]

I fix it, by adding an index.js file in cypress/support/

// cypress/support/index.js

import "./commands";

[np185092]

Hi,

even after adding the above file. still getting the same issue

[zeyasar]

@np185092 I fixed the problem by adding the "import '@testing-library/cypress/add-commands' line to the cypress/support/command.ts " file

[MuhtasimMusfiqZarab]

ahmedelamine
This is the way to resolve this issue:
- yarn add --dev cypress @testing-library/cypress or npm install --save-dev cypress @testing-library/cypress
-Add this line to your project's cypress/support/commands.js: import '@testing-library/cypress/add-commands'
-Typings should be added as follows in tsconfig.json:

{
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"]
  }
}

[ericcmmi]

With Cypress 10.8.0 I added "import "@testing-library/cypress/add-commands";" to cypress/support/e2e.ts which worked for me.

[bsnahrwold79]

I am having the same problem but I am using javascript, not typescript. Here is my set up:
I installed:
npm install --save-dev @testing-library/cypress

I have updated my project files as follows:
/cypress/support/commands.js:
import '@testing-library/cypress/add-commands'

/package.json: (updated after install)

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

My test contains:

describe('example use of cypress testing library', () => {
  it('gets cypress.io text', () => {
    cy.visit('/') // baseUrl in cypress.config.js set to 'https://example.cypress.io'
    cy.findByText('cypress.io')
  })
})

I have restarted my terminal window and relaunched vs code. I still get the error:
TypeError: cy.findByText is not a function.

Does this work with JavaScript or only TypeScript?

[Tbaut]

This was solved for me adding /// <reference types="@testing-library/cypress" /> to the command.ts.

So the command.ts now looks like:

/// <reference types="@testing-library/cypress" />
/// <reference types="cypress" />

import '@testing-library/cypress/add-commands'

Thanks to testing-library/cypress-testing-library#227 (comment)

[falcondpr]

Thanks, this worked for me