I'm in the process of setting up a brand new repository to kick off a fresh project using Next.js with TypeScript. I've integrated Jest and Cypress successfully, as all my tests are passing without any issues. However, my VSCode is still flagging some problems, which I suspect are related to an intellisense issue?

Issues observed in my Jest test files:

Issues observed in my Cypress test files:

I've come across similar problems before, but the solutions I found didn't seem to work in this case...

I've diligently followed the guidelines on how to seamlessly integrate them, including creating 2 tsconfig.json files—one in the root directory and another in the cypress directory.

./tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "./",
        "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": ["jest", "node", "@types/testing-library__jest-dom"]
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules", "cypress"]
}

./cypress/tsconfig.json:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "noEmit": true,
        // be explicit about types included
        // to avoid clashing with Jest types
        "types": ["cypress"]
    },
    "include": [
        "../node_modules/cypress",
        "../tsconfig.json",
        "../package.json",
        "./**/*.ts"
    ]
}

./cypress.config.ts:

import { defineConfig } from 'cypress';

export default defineConfig({
    e2e: {
        baseUrl: 'http://localhost:3000/',
    },
});

./jest.config.ts:

import nextJest from 'next/jest';
// Sync object
const createJestConfig = nextJest({
    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
    dir: './',
});

// Add any custom config to be passed to Jest
const customJestConfig = {
    // Add more setup options before each test is run
    setupFilesAfterEnv: ['<rootDir>/support/setupTests.js'], // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
    moduleDirectories: ['node_modules', '<rootDir>/'],
    testEnvironment: 'jest-environment-jsdom',
    modulePathIgnorePatterns: ['cypress'],
};

module.exports = createJestConfig(customJestConfig);

./next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    eslint: {
        dirs: ['pages', 'public', 'styles', 'cypress', '__tests__', 'support'],
    },
};

module.exports = nextConfig;

./package.json:

{
    "name": "front-end-base-repo",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "lint:fix": "next lint --fix",
        "format": "prettier --write .",
        "prepare": "husky install",
        "precommit": "lint-staged",
        "cy:open": "cypress open",
        "cy:run": "cypress run",
        "test:cy": "start-server-and-test start http://localhost:3000 cy:run",
        "test:jest": "jest --watch",
        "test:jest:ci": "jest --ci"
    },
    "dependencies": {
        "next": "12.1.6",
        "react": "18.2.0",
        "react-dom": "18.2.0"
    },
    "devDependencies": {
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.3.0",
        "@types/cypress": "^1.1.3",
        "@types/jest": "^28.1.1",
        "@types/node": "18.0.0",
        "@types/react": "18.0.12",
        "@types/react-dom": "18.0.5",
        "@types/testing-library__jest-dom": "^5.14.3",
        "@types/testing-library__react": "^10.2.0",
        "@typescript-eslint/eslint-plugin": "^5.28.0",
        "cypress": "^10.1.0",
        "eslint": "8.17.0",
        "eslint-config-next": "12.1.6",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-jest-dom": "^4.0.2",
        "husky": "^8.0.1",
        "jest": "^28.1.1",
        "jest-environment-jsdom": "^28.1.1",
        "lint-staged": "^13.0.1",
        "prettier": "^2.7.0",
        "start-server-and-test": "^1.14.0",
        "ts-node": "^10.8.1",
        "typescript": "4.7.3"
    }
}

For a detailed look at all the configurations, here's a link to the entire repository. I replicated the setup on another computer, only to encounter the same error in VSCode, even though all tests run smoothly.

Here's what I've discovered so far:

• Adding

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

  at the beginning of my cypress test file resolves the issue, but incorporating

  /// <reference types="jest" />

  does not work for my jest files.
• Creating a ./cypress/cypress.d.ts with

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

  eliminates errors in cypress tests, while having a similar file for jest like ./jest.d.ts or ./tests/jest.d.ts with

  /// <reference types="jest" />

  doesn't fix the issue for jest files. I also attempted adding other types like

  /// <reference types="@types/testing-library__jest-dom" />

• Appending

  "typeAcquisition": { "include": ["cypress"] }

  and

  "typeAcquisition": { "include": ["jest"] }

  to the cypress and jest tsconfig.json files had no effect.

Current Status

I made edits to the file at ./cypress/support/e2e.ts to include

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

, which resolved the problem with Cypress test files. However, I'm still facing VSCode errors in Jest test files.