Command cy stays undefined while using the eslint cypress plugin and extending it in the configs

Question

I want to do Component Testing with Cypress, for that I have follolwed the docs and used the automatic file creation for Component Testing. For that I clicked on "Component Testing" in this overview:

It created the file component-index.html and components.ts. In components.ts I only added util/i18n and tailwind, everything else is how it came.

Then I wrote a simple test for a Button, which was inside src/components:

// src/components/Button.cy.tsx
import Button from './Button';

describe('<Button />', () => {
    it('renders', () => {
        cy.mount(<Button label="foo" onClick={() => {}} />);
        cy.get('button').should('have.text', 'foo');
    });
});

But cy cannot be found.

Cannot find name 'cy'. ts(2304)

I have an eslint error, but when runnding the test, it asserts correctly.

I have checked those two previous StackOverflow Questions that had a similar issue, and followed the answer:

• ESLint: 'cy' is not defined (Cypress)
• Cypress and cy undefined in commands.js, but everything works

What I have done is to install the following package: https://github.com/cypress-io/eslint-plugin-cypress and follow the README described. In short I added the following things into my .eslintrc.json:

{
  "extends": ["plugin:cypress/recommended"],
  "plugins": ["cypress"],
}

I also tried adding the following to the config, but with no change in behaviour:

{
  "globals": {
    "cy": true
  }
}

What did work, but which I would prefer not to use, was to add the following to the top of the testing file:

/// <reference types="cypress" />

I want to avoid doing this, because it would mean more manual labour. Eslint config should take care of it, in my opinion. This also added a new issue of .mount() not being recognised:

Property 'mount' does not exist on type 'cy & CyEventEmitter'. ts(2339)

I expected the eslint config and plugin to fix the issue, which it didn't

My Cypress versions are the following:

        "cypress": "12.7.0",
        "cypress-mochawesome-reporter": "3.3.0",
        "cypress-multi-reporters": "1.6.2",
        "eslint-plugin-cypress": "^2.14.0",

Answer 1

If /// <reference types="cypress" /> is working but you are reluctant to use it in each file, be aware that you can add it once only to the top of /support/e2e/ts.

That file is effectively made part or each spec that runs, sort of global pre-spec script, which is why custom commands are defined here.

Also note with typescript and lint changes the effect is not the same as hot-module reload, you may need to restart the editor to see effective changes.

Answer 2

The answer to my question was as follows. One mistake I made in my initial question was referring to it as an ESLint issue, which prevented me from considering the tsconfig at all. The explanation below outlines how I resolved the issue:

Inside my tsconfig.json file that is in the root of the project, I added the following into my configs:

{
  "compilerOptions": {
    "types": ["cypress"],
  }
}

And then inside my global.d.ts file, I added what was already defined inside cypress/support/components.ts:

import { mount } from 'cypress/react';

declare global {
    namespace Cypress {
        interface Chainable {
            mount: typeof mount;
        }
    }
}

This way it made it possible for me to test components outside the cypress folder and next to my components.