testing-library / cypress-testing-library

🐅 Simple and complete custom Cypress commands and utilities that encourage good testing practices.
http://npm.im/@testing-library/cypress
MIT License
1.81k stars 153 forks source link

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

Open gvaatstra opened 1 year ago

gvaatstra commented 1 year ago

Dependencies on @testing-library/dom

(base) ➜ repo git:(cypress-init) npm ls @testing-library/dom repo@1.2.3 /x/x/workspace/repo ├─┬ @testing-library/cypress@9.0.0 │ └── @testing-library/dom@8.20.0 ├─┬ @testing-library/react@14.0.0 │ └── @testing-library/dom@9.0.0 └─┬ @testing-library/user-event@14.4.3 └── @testing-library/dom@9.0.0 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

tgdevereux commented 1 year ago

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