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

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:

Nov 10 '23 12:11 valleywood

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).

Nov 11 '23 13:11 jlp-craigmorten

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

Nov 11 '23 20:11 MatanBobi

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 👍🏻

Nov 11 '23 20:11 valleywood

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.

Nov 12 '23 08:11 MatanBobi

@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? 🤔

Nov 14 '23 07:11 valleywood

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

Nov 14 '23 07:11 MatanBobi

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)

Nov 14 '23 08:11 valleywood

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.

Nov 14 '23 08:11 MatanBobi

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

Nov 14 '23 22:11 valleywood

I don't know how related this is, but I'm using [email protected] 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';

Jan 22 '24 11:01 alexbjorlig