When I run TypeScript lint, it doesn't seem to be recognizing cypress-testing-library commands

[nerrante]

• cypress-testing-library version: 8.0.3
• node version: 16.15.0
• npm version: 8.5.5

Relevant code or config:

tsconfig.json file

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["**/*.ts"]
}

At top of spec files I am trying to lint, I have put the following code:

// @ts-check

in commands.js I have included

import '@testing-library/cypress/add-commands';

What you did:
I am following Gleb's instructions on converting Cypress from JavaScript to TypeScript. So all my files are still .js but I have it set up for TypeScript to check types as seen above. I'm now running the lint command on a few of my spec files to see what errors occur. I am doing the lint via a script that runs the command line:
tsc --noEmit --pretty --allowJs --resolveJsonModule

What happened:
I received type errors for cypress-testing-library commands:

Property 'findByRole' does not exist on type 'cy & CyEventEmitter'.
Property 'findByLabelText' does not exist on type 'cy & CyEventEmitter'

This is for all occurrences of those methods in the spec file

Problem description:
I followed the setup given on this GitHub for getting typescript to work with cypress-testing-library, so I would expect these types to be recognized.

Suggested solution:
Not sure - maybe I am missing something obvious in the set-up?

[NicoMoli]

Hi guys! I have been fighting with the same problem! Could you help me
with some tips? thanks!

[phollaki]

+1

[amruth963]

Hi even I observe the same error when I run my scripts in browserStack. Any alternatives or fix for this please?

Running: movSvc/testCaseCheckTest.spec.js

Oops...we found an error preparing this test file:

cypress\support\index.js

The error was:

Error: Webpack Compilation Error
./cypress/support/commands.js
Module not found: Error: Can't resolve '@testing-library/cypress/add-commands' in 'cypress_test_folder\cypress\support'
resolve '@testing-library/cypress/add-commands' in 'cypress_test_folder\cypress\support'
Parsed request is a module
using description file: cypress_test_folder\package.json (relative path: ./cypress/support)
Field 'browser' doesn't contain a valid alias configuration
Looked for and couldn't find the file at the following paths:
[cypress_test_folder\cypress\support\node_modules]
[cypress_test_folder\cypress\node_modules]
[node_modules]

[Big-Zude]

When I try to run my test in a typescript project, am getting the error below, need assistance

Error: Webpack Compilation Error
./node_modules/@testing-library/cypress/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js 429:27
Module parse failed: Unexpected token (429:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- types are not aware of older browsers that don't implement `labels`
|   if (element.labels !== undefined) {
>     return element.labels ?? [];
|   }
| 
 @ ./node_modules/@testing-library/cypress/dist/index.js 9:11-42
 @ ./node_modules/@testing-library/cypress/dist/add-commands.js
 @ ./node_modules/@testing-library/cypress/add-commands.js
 @ ./cypress/support/e2e.ts
    at Watching.handle [as handler] (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:180:23)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Watching._done (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:188:23)

the tests run without @testing-library/cypress in command.ts and e2e.ts

[eigu47]

When I try to run my test in a typescript project, am getting the error below, need assistance

Error: Webpack Compilation Error
./node_modules/@testing-library/cypress/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js 429:27
Module parse failed: Unexpected token (429:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- types are not aware of older browsers that don't implement `labels`
|   if (element.labels !== undefined) {
>     return element.labels ?? [];
|   }
| 
 @ ./node_modules/@testing-library/cypress/dist/index.js 9:11-42
 @ ./node_modules/@testing-library/cypress/dist/add-commands.js
 @ ./node_modules/@testing-library/cypress/add-commands.js
 @ ./cypress/support/e2e.ts
    at Watching.handle [as handler] (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:180:23)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Watching._done (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/zudemwango/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:188:23)

the tests run without @testing-library/cypress in command.ts and e2e.ts

I followed the installations steps and I have the same problem. Whithout the import @testing-library/cypress works but with no testing library dom functions.

next 12.2.4
cypress 10.8.0
@testing-library/cypress 8.0.3

[phollaki]

One solution worked for me. Use reference comments on the top of your test files:
/// <reference types="cypress" />
/// <reference types="@testing-library/cypress" />

[wingy3181]

Another solution is as per https://zudemwango.medium.com/how-to-setup-cypress-testing-library-cypress-with-typescript-ac401a604d74 and i just added /// <reference types="@testing-library/cypress" /> to the top of cypress/support/e2e.ts (OR cypress/support/commands.ts)

[josht28]

One solution worked for me. Use reference comments on the top of your test files: /// <reference types="cypress" /> /// <reference types="@testing-library/cypress" />

Worked like a charm!