cy.getBy*** is not a function

Question

I'm trying to run Cypress during my Azure release pipeline. I install all the packages I install locally but when I run the Cypress tests I get several errors:

TypeError: cy.visit(...).getByText is not a function

TypeError: cy.getByLabelText is not a function

TypeError: cy.getByPlaceholderText is not a function

I've added the following packages to my package.json devDependencies section:

"@testing-library/cypress": "^4.0.4",
"@testing-library/react": "^8.0.4",
"@testing-library/dom": "latest",

Any ideas why Cypress is returning these TypeErrors?

This is an example of a written test:

it("can request to join private team", () => {
  const privateTeamId = "fe1fa897-2e90-4ecb-91f9-0c9bb33ef63a";
  cy.get(`[id=${privateTeamId}]`)
    .click()
    .getByText("Request membership")
    .click()
    .getByText("Membership request sent");
});

Answer 1

You need to extend Cypress' cy command.

Just add this import '@testing-library/cypress/add-commands'; line to your project's cypress/support/commands.js

After adding this line, if it still doesn't work then close Cypress and start it again.

Answer 2

In my case I figured out the getBy* queries does not exist in the integration between Testing Library + Cypress.

So I just migrated from cy.getByText to cy.findByText and everything worked.

According to the docs:

Note: the get* queries are not supported because for reasonable Cypress tests you need retryability and find* queries already support that. query* queries are no longer necessary since v5 and will be removed in v6. find* fully support built-in Cypress assertions (removes the only use-case for query*).

https://testing-library.com/docs/cypress-testing-library/intro