Typescript definition conflict, when including cypress types in create react app

Current behavior:

When cypress types are included by tsconfig in cypress root folder and /// <reference types="Cypress" /> exists inside cypress integration spec, any reference to jest in a react component test eg expect() is overwritten and now seems to reference chai expect()

Also it looks like cypress is not able to pick up the types that have been defined inside its own tsconfig, hence the need for /// <reference types="Cypress" /> at the top of the test file see cypress/integration/app_spec.ts.

Desired behavior:

Any reference to jest in a react component test eg expect() is not overwritten. Cypress is able to pick up the types defined in its own tsconfig file.

Steps to reproduce:

git clone https://github.com/neiltownsley/react-typescript-cypress

yarn install

yarn start

App.test.tsx: (15,47): Property ‘toEqual’ does not exist on type ‘Assertion’. Did you mean ‘equal’?

yarn cypress open

cypress opens but can not resolve the domain because of compile errors.

When /// <reference types="Cypress" /> is removed from app_spec.ts

yarn start

app_spec.ts: (4,9): Cannot find name ‘cy’.

Versions

[bahmutov]

I think https://github.com/neiltownsley/react-typescript-cypress/pull/1 solves your problem

[ppulwey]

Ich had the same issue with Next.js. This tsconfig.json works for me

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "types": ["cypress", "node", "jest"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}