Dom-testing-library: Custom testIdAttribute ignored

[amandapouget]

• @testing-library/dom version: 7.29.4
• Testing Framework and version: Jest
  
• DOM Environment:
  

Relevant code or config:

configure({ testIdAttribute: 'foobar' })

What you did:

Happily seeing getByTestId work, then I bumped to this version of dom-testing-library, and it stopped working.

What happened:

It's clearly ignoring the config and searching for the default data-testid:
TestingLibraryElementError: Unable to find an element by: [data-testid="bar"...

Reproduction:

Use configure({ testIdAttribute }) in any environment and see that it's broken now.

Problem description:

Hundreds and hundreds of tests break.

Suggested solution:

It's unfortunately hard to figure out where this broke because we get our dom-testing-library via @testing-library/react, which carets it, meaning it jumps from 7.27.1 -> 7.29.4. Somewhere in the commits in dom-testing-library between those two version numbers is the regression.

[amandapouget]

It seems that if you bump @testing-library/react to 11.2.2+, _you must also bump @testing-library/dom to the latest available version at the same time_. This is because @testing-library/react carets @testing-library/dom. Otherwise you end up with competing versions of @testing-library/dom which causes the regressive behavior.

Resolves the issue.

Please update the documentation for the release notes for @testing-library/react 11.2.2 to indicate this dependency. Thank you!

[eps1lon]

Thanks for the report.

I definitely understand your frustration here. Let me quickly explain the problem.

@testing-library/react depends on @testing-library/dom. If you configure @testing-library/react you also configure the version @testing-library/react uses of @testing-library/dom. However, if you explicitly declare @testing-library/dom in your package.json it is not guaranteed that the version of @testing-library/dom you import is the same as @testing-library/react uses.

In the current state you would have to guarantee that. We could make @testing-library/dom a peer dependecy of @testing-library/react but that would mean more setup steps required for users of @testing-library/react.

Could you share a reproducible example where this problem occurred and explain a bit more about how you use @testing-library/react and @testing-library/dom? Because "It seems that if you bump @testing-library/react to 11.2.2+, you must also bump @testing-library/dom to the latest available version at the same time." seems unintended.

We may just want to re-export everything from @testing-library/dom so that you don't have to install that separately.

[MatanBobi]

Thanks for the report.

I definitely understand your frustration here. Let me quickly explain the problem.

@testing-library/react depends on @testing-library/dom. If you configure @testing-library/react you also configure the version @testing-library/react uses of @testing-library/dom. However, if you explicitly declare @testing-library/dom in your package.json it is not guaranteed that the version of @testing-library/dom you import is the same as @testing-library/react uses.

In the current state you would have to guarantee that. We could make @testing-library/dom a peer dependecy of @testing-library/react but that would mean more setup steps required for users of @testing-library/react.

Could you share a reproducible example where this problem occurred and explain a bit more about how you use @testing-library/react and @testing-library/dom? Because "It seems that if you bump @testing-library/react to 11.2.2+, you must also bump @testing-library/dom to the latest available version at the same time." seems unintended.

We may just want to re-export everything from @testing-library/dom so that you don't have to install that separately.

I think we already do re-export everything from @testing-library/dom here and actually there's no real need to install @testing-library/dom as far as I remember and as far as the docs say here.

[eps1lon]

as far as the docs say here.

Where does it say that you don't need to install @testing-library/dom? It's kind of implied that by @testing-library/react just working. But I can't find where it says that the importing from both libraries might be problematic concerning singletons (like configure).

[MatanBobi]

But I can't find where it says that the importing from both libraries might be problematic concerning singletons (like configure).

You're right about that one, I think that we don't mention that it might be problematic. Maybe we can implicitly state that there's no need to install @testing-library/dom since everything is already exported from @testing-library/react,
Wdyt?

[eps1lon]

Maybe we can implicitly state that there's no need to install @testing-library/dom since everything is already exported from @testing-library/react,
Wdyt?

You mean "explicitly"? If not then I don't think that "implicit documentation" works.

It would still be nice to confirm if this is indeed the problem.

[MatanBobi]

You mean "explicitly"? If not then I don't think that "implicit documentation" works.

Yep, you're right, my bad :)

[amandapouget]

I suspect it got added in our case due to the eslint warning when importing configure:

import { configure } from '@testing-library/dom';
...
 1:1  error  '@testing-library/dom' should be listed in the project's dependencies. Run 'npm i -S @testing-library/dom' to add it

[amandapouget]

It could help to have a warning not to install dom directly if installing @testing-library/react?

[amandapouget]

At least in my repo, I can confirm this was the issue.

[eps1lon]

I suspect it got added in our case due to the eslint warning when importing configure:

Why did you choose to import it from @testing-library/dom and not @testing-library/react?

[amandapouget]

similarly, these red herrings from eslint because of the usage in jest setup file:

1:1 error '@testing-library/react' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies
2:1 error '@testing-library/jest-dom' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies

not really this repo's problem but it could help to doc that this is false

[eps1lon]

1:1 error '@testing-library/react' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies
2:1 error '@testing-library/jest-dom' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies

None of these mention @testing-library/dom though. Maybe your editor accidentally created the import of @testing-library/dom?

It sounds like false-positives of import/no-extraneous-dependencies not like an issue with our library. If you import something in a test (config) file then it seems appropriate to me to list it as a devDependency.

[alexkrolick]

That's a lint warning from the AirBnB lint config - they should really document when to disable it, e.g., for test files and local development scripts.