getByTestId not working when upgrading @testing-library/dom from version 9.3.1 to 9.3.2 or above #1276

valleywood · 2023-11-10T12:16:13Z

Possibly also the reason for this issue:
findByRole doesn't find the role

@testing-library/dom version: 9.3.2

Testing Framework and version:

"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.0",
"@types/jest": "^29.5.8",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",

Relevant code or config:

test('FacetSize callback', async () => {
    render(<div data-test-id="123">Test</div>);
    const testTestId = screen.getByTestId('123');
    await waitFor(() => expect(testTestId).toBeInTheDocument());
  });

What you did:

Ran test according to above

What happened:

Getting this error:

  TestingLibraryElementError: Unable to find an element by: [data-testid="123"]

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          data-test-id="123"
        >
          Test
        </div>
      </div>
    </body>

Problem description:

Test fails when running with @testing-library/dom version higher than 9.3.1
Exact same code works with version 9.3.1 and below.

Suggested solution:

The text was updated successfully, but these errors were encountered:

jlp-craigmorten · 2023-11-11T13:01:18Z

Try with data-testid and not data-test-id, without the extra hyphen 🙂

import React from 'react';
import { render, screen } from '@testing-library/react';

test('FacetSize callback', async () => {
  render(<div data-testid="123">Test</div>);
  const testTestId = screen.getByTestId('123');
  expect(testTestId).toBeInTheDocument();
});

A shortcut to container.querySelector(`[data-testid="${yourId}"]`)

REF: https://testing-library.com/docs/queries/bytestid/

If you make extensive use of data-test-id in your codebase, there is also an option to configure the testIdAttribute (see bottom of the linked docs).

MatanBobi · 2023-11-11T20:07:02Z

Thanks @jlp-craigmorten, I believe that's the issue. @valleywood, if it's not the issue please re-open :)

valleywood · 2023-11-11T20:22:58Z

Thanks @jlp-craigmorten, I believe that's the issue. @valleywood, if it's not the issue please re-open :)

Thanks, is that a breaking change in 9.3.2 then? (since the same code works in 9.3.1) AFK right now but will test on monday 👍🏻

MatanBobi · 2023-11-12T08:30:14Z

Nope, that's not related. You can see in the error message that your element uses data-test-id="123" whereas the selector is looking for [data-testid="123"], data-testid is the default test id we use as long as a different one wasn't configured using the configure method. If you are using the configure method, please let us know and re-open this issue.

valleywood · 2023-11-14T07:45:41Z

@MatanBobi @jlp-craigmorten Thank you for helping out with this!

Finally having some time to look into this a bit more.
Actually it showed to be related to the hypen but I still think that this is a new bug introduced in 9.3.2.

I'm using the configure method like this:

import { configure } from '@testing-library/dom';

configure({
  testIdAttribute: 'data-test-id',
});

Removing this configuration and switching to all my test attributes to data-testid solves the problem with my tests failing with @testing-library/dom > 9.3.1. Don't know if this ticket should be re-opened or if we should write a new one about that the configuration on the testIdAttribute is broken? 🤔

MatanBobi · 2023-11-14T07:48:05Z

This might be related to multiple different @testing-library/dom version installed, can you please check if you have different version installed?

valleywood · 2023-11-14T08:10:57Z

That might have been the case!
Unfortunately (or fortunately :)) I'm not able to reproduce the error any longer after wiping everything from scratch but I can see that I now have the same version 9.3.3 installed and then it works both with and without the configuration.

Think that you can close this issue again now since it probably was version related then.

Thanks again for rapid support! 🙏

yarn why @testing-library/dom
├─ @testing-library/react@npm:14.0.0
│  └─ @testing-library/dom@npm:9.3.3 (via npm:^9.0.0)
│
├─ @testing-library/react@npm:14.1.0
│  └─ @testing-library/dom@npm:9.3.3 (via npm:^9.0.0)
│
├─ @testing-library/react@npm:14.0.0 [4175b]
│  └─ @testing-library/dom@npm:9.3.3 (via npm:^9.0.0)
│
├─ @testing-library/react@npm:14.1.0 [dda50]
│  └─ @testing-library/dom@npm:9.3.3 (via npm:^9.0.0)
│
└─ @my-repo/my-package@workspace:.
   └─ @testing-library/dom@npm:9.3.3 (via npm:^9.3.3)

MatanBobi · 2023-11-14T08:58:02Z

Hmm, actually, we might need to take a look into it or at least document it. I'm not sure based on this log why you have multiple version installed though, can you please explain? :) Looks like you have two version of @testing-library/react installed.

valleywood · 2023-11-14T22:19:10Z

Think that output of yarn why @testing-library/dom is a bit misleading since it is run inside a yarn workspace. Running outside that workspace doesn't indicate that the packages are installed multiple times

alexbjorlig · 2024-01-22T11:02:06Z

I don't know how related this is, but I'm using storybook@7.6.10 and noticed that my:

import { configure } from '@storybook/testing-library';
configure({
  testIdAttribute: 'data-cy',
});

stopped working.

The only fix I could find was to import like this: import { configure } from '@testing-library/dom';

MatanBobi · 2024-05-04T19:08:49Z

This is probably related to the multiple versions of @testing-library/dom. We're working on moving DTL to peer in RTL and will probably recommend doing that for other libraries in the organization too, this should resolve it.

valleywood mentioned this issue Nov 10, 2023

findByRole doesn't find the role testing-library/react-testing-library#1248

Open

MatanBobi closed this as completed Nov 11, 2023

MatanBobi reopened this Nov 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getByTestId not working when upgrading @testing-library/dom from version 9.3.1 to 9.3.2 or above #1276

getByTestId not working when upgrading @testing-library/dom from version 9.3.1 to 9.3.2 or above #1276

valleywood commented Nov 10, 2023

jlp-craigmorten commented Nov 11, 2023 •

edited

MatanBobi commented Nov 11, 2023

valleywood commented Nov 11, 2023 •

edited

MatanBobi commented Nov 12, 2023

valleywood commented Nov 14, 2023

MatanBobi commented Nov 14, 2023

valleywood commented Nov 14, 2023

MatanBobi commented Nov 14, 2023

valleywood commented Nov 14, 2023

alexbjorlig commented Jan 22, 2024

MatanBobi commented May 4, 2024

getByTestId not working when upgrading @testing-library/dom from version 9.3.1 to 9.3.2 or above #1276

getByTestId not working when upgrading @testing-library/dom from version 9.3.1 to 9.3.2 or above #1276

Comments

valleywood commented Nov 10, 2023

Relevant code or config:

What you did:

What happened:

Problem description:

Suggested solution:

jlp-craigmorten commented Nov 11, 2023 • edited

MatanBobi commented Nov 11, 2023

valleywood commented Nov 11, 2023 • edited

MatanBobi commented Nov 12, 2023

valleywood commented Nov 14, 2023

MatanBobi commented Nov 14, 2023

valleywood commented Nov 14, 2023

MatanBobi commented Nov 14, 2023

valleywood commented Nov 14, 2023

alexbjorlig commented Jan 22, 2024

MatanBobi commented May 4, 2024

jlp-craigmorten commented Nov 11, 2023 •

edited

valleywood commented Nov 11, 2023 •

edited