Why do I get the error: TypeError: cy.findByRole is not a function in Cypress?

Question

I want to use the testing library cypress. I have installed the package @testing-library/cypress. Here is the package.json file:

{
  "name": "acceptancetest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^13.0.2",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
    "@cypress/webpack-dev-server": "^2.3.0",
    "@cypress/webpack-preprocessor": "^5.13.0",
    "md5": "^2.3.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4"
  },
  "devDependencies": {
    "@testing-library/cypress": "^8.0.3",
    "cypress": "^10.10.0",
    "webpack": "^5.74.0"
  }
}

I have also configured the cypress/support/commands.ts:

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

and configured the tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["**/*.ts"]
}

My step file looks like this:

import { Given,When ,Then } from "@badeball/cypress-cucumber-preprocessor";

        Given('I am currently logged out', () => {
            cy.visit('/')
            cy.contains('Login')
            cy.findByRole('button', {name: /Jackie Chan/i})
            cy.findByText('Logdout').should('not.exist')
            cy.findByText('Todos').should('not.exist')
            cy.not('Home')
        });

When I run the cypress test I get the following error message:

TypeError: cy.findByRole is not a function

How do I fix this error?

Answer 1

It's working for me by adding /// <reference types="@testing-library/cypress" /> to command.ts. So it's now looking like this

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

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