cypress-testing-library icon indicating copy to clipboard operation
cypress-testing-library copied to clipboard

Dependency problem on @testing-library/dom between @testing-library/react and cypress-testing-library

Open gvaatstra opened this issue 2 years ago • 5 comments

  • cypress-testing-library version: 9.0.0
  • node version: v18.14.1
  • npm (or yarn) version: 8.17.0

Dependencies on @testing-library/dom

(base) ➜ repo git:(cypress-init) npm ls @testing-library/dom [email protected] /x/x/workspace/repo ├─┬ @testing-library/[email protected] │ └── @testing-library/[email protected] ├─┬ @testing-library/[email protected] │ └── @testing-library/[email protected] └─┬ @testing-library/[email protected] └── @testing-library/[email protected] deduped

This results in a 9.0.0 in my package-lock.json

    "node_modules/@testing-library/dom": {
      "version": "9.0.0",
      "dev": true,
      "license": "MIT",
      "dependencies": {
....
      },
      "engines": {
        "node": ">=14"
      }
    },

What you did:

  1. With version 9.0.0 I get webpack errors:
Error: Webpack Compilation Error
./node_modules/@testing-library/dom/dist/queries/role.js 139:59
Module parse failed: Unexpected token (139:59)
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
| function makeRoleSelector(role) {
|   const explicitRoleSelector = `*[role~="${role}"]`;
>   const roleRelations = _ariaQuery.roleElements.get(role) ?? new Set();
|   const implicitRoleSelectors = new Set(Array.from(roleRelations).map(({
|     name
 @ ./node_modules/@testing-library/dom/dist/queries/index.js 72:12-29
 @ ./node_modules/@testing-library/dom/dist/index.js
 @ ./node_modules/@testing-library/cypress/dist/index.js
 @ ./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/gerwinvaatstra/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
  1. If I manually install @testing-library/dom version 8.20.0, the unittests still seem to work and Cypress starts as well. However, that would go against the specification of @testing-library/react which needs ^9.0.0

Problem description: Clashing dependencies.

Suggested solution: Upgrade to the use of 9.0.0 of @testing-library/dom, although of course as tried, it isn't as simple as upping the number because it doesn't work with 9. My knowledge is limited in what is needed to be able to work with 9.0.0

gvaatstra avatar May 12 '23 14:05 gvaatstra

Is this dependency update likely to be implemented soon in this library? This is causing webpack errors/build issues in any UI that we have Cypress tests implemented in, and any workaround is sub-optimal

tgdevereux avatar Jul 18 '23 13:07 tgdevereux

I have the same error with @testing-library/[email protected] and @testing-library/[email protected]. Stack trace:

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

  > cypress/support/e2e.js

The error was:

Error: Parsing file <project_root>/node_modules/@testing-library/dom/dist/queries/role.js: Unexpected token (153:23)
    at Deps.parseDeps (<project_root>/node_modules/module-deps/index.js:519:15)
    at getDeps (<project_root>/node_modules/module-deps/index.js:447:44)
    at <project_root>/node_modules/module-deps/index.js:430:38
    at ConcatStream.<anonymous> (<project_root>/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (node:events:531:35)
    at ConcatStream.emit (node:domain:488:12)
    at finishMaybe (<project_root>/node_modules/readable-stream/lib/_stream_writable.js:630:14)
    at endWritable (<project_root>/node_modules/readable-stream/lib/_stream_writable.js:638:3)
    at ConcatStream.Writable.end (<project_root>/node_modules/readable-stream/lib/_stream_writable.js:594:22)
    at DuplexWrapper.onend (<project_root>/node_modules/readable-stream/lib/_stream_readable.js:577:10)
    at Object.onceWrapper (node:events:633:28)
    at DuplexWrapper.emit (node:events:531:35)
    at DuplexWrapper.emit (node:domain:488:12)
    at endReadableNT (<project_root>/node_modules/readable-stream/lib/_stream_readable.js:1010:12)
    at processTicksAndRejections (node:internal/process/task_queues:82:21)

alexeyr-ci2 avatar Mar 26 '25 13:03 alexeyr-ci2

I'm getting the same issue as alexyr, I'm seeing it with the following versions:

Error: Parsing file [PROJECT_PATH]/node_modules/@testing-library/dom/dist/queries/role.js: Unexpected token (153:23)
    at Deps.parseDeps ([PROJECT_PATH]/node_modules/module-deps/index.js:519:15)
    at getDeps ([PROJECT_PATH]/node_modules/module-deps/index.js:447:44)
    at [PROJECT_PATH]/node_modules/module-deps/index.js:430:38
    at ConcatStream.<anonymous> ([PROJECT_PATH]/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (node:events:530:35)
    at ConcatStream.emit (node:domain:488:12)
    at finishMaybe ([PROJECT_PATH]/node_modules/readable-stream/lib/_stream_writable.js:630:14)
    at endWritable ([PROJECT_PATH]/node_modules/readable-stream/lib/_stream_writable.js:638:3)
    at ConcatStream.Writable.end ([PROJECT_PATH]/node_modules/readable-stream/lib/_stream_writable.js:594:22)
    at DuplexWrapper.onend ([PROJECT_PATH]/node_modules/readable-stream/lib/_stream_readable.js:577:10)
    at Object.onceWrapper (node:events:632:28)
    at DuplexWrapper.emit (node:events:530:35)
    at DuplexWrapper.emit (node:domain:488:12)
    at endReadableNT ([PROJECT_PATH]/node_modules/readable-stream/lib/_stream_readable.js:1010:12)
    at processTicksAndRejections (node:internal/process/task_queues:82:21)

Digging a little into that role.js file on the error, it looks like it is this one https://github.com/testing-library/dom-testing-library/blob/a86c54ccda5242ad8dfc1c70d31980bdbf96af7f/src/queries/role.ts#L244 and it seems that the &&= operator is what cypress has an issue with.

Jorge-Cano-NS avatar May 22 '25 15:05 Jorge-Cano-NS

@Jorge-Cano-NS - Did you come up with a fix for this? I'm seeing the same issue after updating testing-library/cypress to 10.0.0.3 from 9.0.0 (along with some other cypress libs to the latest version). Things are happy when using 9.0.0 again.

That did cause testing-library/dom to go from 8.1.0 to 10.1.0 and aria-query to go from 5.1.3 to 5.3.0, but that seems to be expected.

chipach avatar Jul 10 '25 17:07 chipach

also having this same issue

BitwiseMercenary avatar Aug 11 '25 15:08 BitwiseMercenary