Fix missing Cypress type definitions

This issue was just annoying enough to warrant highlighting the fix.

TL;DR

Add Cypress to the "include" property in your tsconfig.json file.

// tsconfig.json
  "compilerOptions": {
    // The "include" option goes outside of the compilerOptions
  },
  "include": ["src", "cypress"], // <------
  "exclude": ["./tests", "**/*.test.*"],

The other hack is to add this comment to the top of your spec files. This halfway worked for me but still didn't recognize cy.mount().

/// <reference types="Cypress" />

The Problem

I'm setting up Cypress testing on my React apps and VS Code was not recognizing the Cypress type definitions. The code still compiled and worked fine.

This is not what you want to see.

Installing types for Jest and Mocha as per the warning message doesn't work and isn't what you want anyway. We want Cypress types. Installing types for Cypress is just a stub and does nothing.

Adding Cypress to types under compilerOptions in tsconfig.json just gives another error.

{
  "compilerOptions": {
    //...options...
    "types": ["cypress"]
  }
}

The solution above gets rid of all the errors but took way too much messing around and Googling to find. I hope this helps some other poor sap who just wants to write some tests!

Sources

The Solution
GitHub Issue 1236
GitHub Issue 1152

• Next: Firebase with React Provider Component Pattern
• Previous: Add Firebase Realtime Database To Your React App