getBy*** is not a function

[alucardu]

dom-testing-library version: 5.0.0

• react version: 16.8
• node version: v10.16.0
• npm (or yarn) version: 6.9.0
• 'yarn': 1.16.0

Relevant code or config:

  it("is displaying the login panel and log in is working", () => {
    cy.visit("/customers/telephony", { failOnStatusCode: false })
      .getByText("LOGIN")
      .click()
      .getByTestId("phone-panel");
  });

What you did:

I'm trying to run Cypress from a Azure Release Pipeline. My steps:

1. create a cypress.json file
2. create a package.json file
3. npm i yarn
4. yarn
5. node mochawesomereport.js

Relevant files:

cypress.json

{
"reporter": "mochawesome",
"baseUrl": "$(featureReleaseUrl)",
"videosFolder": "mochawesome-report/video",
"screenshotsFolder": "mochawesome-report/screenshot",
    "reporterOptions": {
        "reportDir": "mochawesome-report",
        "overwrite": false,
        "html": false,
        "json": true
    }
}

package.json

{
"name": "@E***cesbs/suite",
"version": "0.1.1",
"description": "E***ce React Suite",
"main": "index.js",
"repository": "https://dev.azure.com/E***ce/E***ce%20Suite/_git/client",
"author": "E***ce",
"license": "MIT",
"private": true,
"workspaces": [
    "apps/*",
    "apps/web/*",
    "shared/*"
],
"devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/runtime": "^7.4.5",
    "@testing-library/cypress": "^4.0.4",
    "@testing-library/react": "^8.0.5",
    "@testing-library/dom": "^5.6.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^12.0.3",
    "@types/react": "^16.8.19",
    "@types/react-dom": "^16.8.4",
    "@types/react-router-dom": "^4.3.2",
    "@types/react-test-renderer": "^16.8.1",
    "@typescript-eslint/eslint-plugin": "^1.7.0",
    "@typescript-eslint/parser": "^1.6.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader-lerna-cra": "^0.1.3",
    "copy-webpack-plugin": "^5.0.3",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "customize-cra": "^0.2.12",
    "cypress": "^3.3.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-react-app": "^4.0.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jest": "^22.6.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.3",
    "eslint-plugin-react-hooks": "^1.6.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.8.0",
    "jest-canvas-mock": "^2.1.0",
    "jest-junit": "^6.0.1",
    "lerna": "^3.13.4",
    "lerna-changelog": "^0.8.2",
    "dom-testing-library": "^5.0.0",
    "mocha": "^5.2.0",
    "mocha-junit-reporters": "^1.23.6",
    "mocha-multi-reporters": "^1.1.7",
    "mochawesome": "^4.0.1",
    "mochawesome-merge": "^2.0.1",
    "mochawesome-report-generator": "^4.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^1.15.3",
    "react-app-rewired": "^2.1.1",
    "react-scripts": "^3.0.1",
    "react-test-renderer": "^16.8.6",
    "rimraf": "^2.6.3",
    "start-server-and-test": "^1.9.1",
    "style-loader": "^0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-recommended": "^2.1.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.8.0",
    "ts-jest": "^24.0.1",
    "typescript": "^3.5.1",
    "webpack-cli": "^3.3.2"
}
}

mochawesomereport.js

/* eslint-disable @typescript-eslint/no-var-requires */
const cypress = require("cypress");
const marge = require("mochawesome-report-generator");
const { merge } = require("mochawesome-merge");

function generateReport(options) {
  return merge(options).then(report => marge.create(report, options));
}

cypress.run().then(
  () => {
    generateReport();
  },
  error => {
    generateReport();
    window.console.error(error);
    process.exit(1);
  }
);

What happened:

Everything is installed and Cypress runs:

1) Telephony
    is displaying the login panel and log in is working:
    TypeError: cy.visit(...).getByText is not a function
    at Context.<anonymous> (https://siteurl****.z6.web.core.windows.net/__cypress/tests?p=cypress\integration\integration\customers\telephony\telephony.spec.js-039:8:8)

Problem description:

When I run my test locally (against the same baseUrl) I don't have this issue, while I use the same devDependencies and yarn to install them.

[kentcdodds]

Are you importing the add-commands file anywhere as documented?

[alucardu]

I didn't create the tests, I just need to implement them on our dev-ops environment. In none of our spec files we import anything. But you made me realize that I was only using the spec files on the release pipeline. I took a look in our Cypress folder structure and found a file commands.js which has import "@testing-library/cypress/add-commands"; removing this line causes the same issues locally as on the release pipeline environment. So instead of only using the spec files, I've uploaded the entire Cypress folder and now I have the same results on the release pipeline as locally :).