Cypress: process is not defined

Question

I made a simple Cypress test for a basic React app. Checking wether <div> with id container exist, but it fails. What is wrong? I am newbie with Cypress.

Watching this video: https://www.youtube.com/watch?v=5ajwAkZDbwo

const cypress = require("cypress")

describe("renders the home page", () => {
    it("renders  correctly", () => {
        cypress.visit("/")
        cy.get("#container").should("exist")
    })
})

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div id="container"></div>
      </header>
    </div>
  );
}

export default App;

Answer 1

It's basically the import of "cypress" that's giving the error.

You don't need to import it, it's set up globally.

In fact there's two globals

• cy used to define commands like cy.visit()
• Cypress which gives you access to utilities like Cypress.config('baseUrl')

// const cypress = require("cypress")  -- don't need this

describe("renders the home page", () => {
    it("renders  correctly", () => {
        // cypress.visit("/")  
        cy.visit("/")
        cy.get("#container").should("exist")
    })
})

You should also know that cy.get("#container").should("exist") can also be done by just cy.get("#container").

The cy.get() command has a built-in existence check, e.g if you used cy.get("#container2") on your app it would fail the test because "#container2" does not exist.