nx generator for cypress component tests doesn't generate correct tsconfigs

[tar-aldev]

Current Behavior

Running

nx generate @nx/next:cypress-component-configuration

generates config and folders for cypress component testing.
However, cy is not recognized at all

I spent quite a lot of time trying to figure out what's wrong, but I failed.
including commands.ts file in tsconfig.ts, didn't help.

I could reproduce it even on a fresh project.

Expected Behavior

SHould be able to use cypress component testing without any typescript problems

GitHub Repo

I didn't do anything to tsconfig files - just what was generated by nx
https://github.com/tar-aldev/nrwl-nx-cypress-component-testing-issues

Steps to Reproduce

1. create nx workspace
2. create next.js app
3. add cypress component testing config to it
4. try to create .cy.tsx file and typing cy.mount()
   Result: it will show the message

Cannot find name 'cy'.ts(2304)

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 18.18.0
   OS     : darwin-x64
   yarn   : 3.1.1
   
   nx                 : 16.9.0
   @nx/js             : 16.9.1
   @nrwl/js           : 16.9.0
   @nx/jest           : 16.9.0
   @nx/linter         : 16.9.0
   @nx/workspace      : 16.9.0
   @nx/cypress        : 16.9.0
   @nrwl/cypress      : 16.9.1
   @nx/devkit         : 16.9.0
   @nx/eslint-plugin  : 16.9.0
   @nx/express        : 16.9.0
   @nx/next           : 16.9.0
   @nx/node           : 16.9.0
   @nx/playwright     : 16.9.1
   @nx/react          : 16.9.0
   @nx/storybook      : 16.9.1
   @nrwl/tao          : 16.9.0
   @nx/web            : 16.9.1
   @nrwl/web          : 16.9.0
   @nx/webpack        : 16.9.0
   nx-cloud           : 16.4.0
   typescript         : 5.1.3

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

I see this part added under /app/tsconfig.json

    "cypress/**/*",
    "cypress.config.ts",
    "**/*.cy.ts",
    "**/*.cy.js",
    "**/*.cy.tsx",
    "**/*.cy.jsx"

As soon as I remove this, it seems to start working just fine.
But then I start getting a lot of troubles with jest tests too. Cypress assertions conflict with jest ones.
If I add this to exclude of tsconfig.json

"**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js", "**/*.spec.jsx", "**/*.d.ts"

it helps with assertion ts errors, but then it starts complaining about imports from @org/lib-name which are other libs created with nx.
So just to be sure. the structure is like this

tsconfig.json
tsconfig.spec.json
app/ <--- this has some cypress and jest tests
cypress/
-- tsconfig.json
-- support
-- ...

tsconfig.json file looks like this

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "strictNullChecks": false
  },
  "files": [],
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "next-env.d.ts",
    "**/*.js",
    "**/*.jsx",
    "../../apps/frontend-next/.next/types/**/*.ts",
    "../../dist/apps/frontend-next/.next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "jest.config.ts", "cypress.config.ts"]
}

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["jest", "node"],
    "jsx": "react"
  },
  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js", "**/*.spec.jsx", "**/*.d.ts"]
}

cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["cypress", "node"],
    "sourceMap": false
  },
  "include": [
    "**/*.ts",
    "**/*.js",
    "../cypress.config.ts",
    "../**/*.cy.ts",
    "../**/*.cy.tsx",
    "../**/*.cy.js",
    "../**/*.cy.jsx",
  ]
}

[tar-aldev]

Upd:
I could almost make it work by doing this

1. exclude jest tests in tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    ...
    "types": ["jest", "node"]
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "../../apps/checking-tests/.next/types/**/*.ts",
    "../../dist/apps/checking-tests/.next/types/**/*.ts",
    "next-env.d.ts"
  ],
  "exclude": [
    "node_modules",
    "jest.config.ts",
    "**/*.spec.ts",
    "**/*.test.ts",
    "**/*.spec.tsx",
    "**/*.test.tsx"
  ]
}

Include them in tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["jest", "node"],
    "jsx": "react"
  },
  "include": [
    "jest.config.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.ts",
    "src/**/*.test.tsx",
    "src/**/*.spec.tsx",
    "src/**/*.test.js",
    "src/**/*.spec.js",
    "src/**/*.test.jsx",
    "src/**/*.spec.jsx",
    "src/**/*.d.ts"
  ]
}

Unfortunately, now I have another problem though:
I am unable to import any other libs I've created in jest tests.

It looks like when I ignore test files in tsconfig.json it can't resolve what I have in paths in tssconfig.base.json at the root of the project.
Any way to fix this?

[wrslatz]

Also seeing this still even after #12965

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.