search

testing-library / dom-testing-library

🐙 Simple and complete DOM testing utilities that encourage good testing practices.
https://testing-library.com/dom
MIT License
3.26k stars 466 forks source link

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

Open valleywood opened 10 months ago

valleywood commented 10 months ago

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

@testing-library/dom version: 9.3.2

"@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:

jlp-craigmorten commented 10 months ago

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 commented 10 months ago

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

valleywood commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

@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 commented 10 months ago

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

valleywood commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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 commented 8 months ago

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 commented 5 months ago

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.

janeklb commented 4 months ago

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.

This is great news, thanks @MatanBobi. Could you please link to any relevant threads / issues that I could follow to stay up to date on that front?

MatanBobi commented 4 months ago

@janeklb Sure thing, here's the PR for that: https://github.com/testing-library/react-testing-library/pull/1305

janeklb commented 4 months ago

Thank you! Are you aware of any initiatives to try and get other major libs (such as @storybook/test) to move DTL to a peer dep?

MatanBobi commented 4 months ago

@janeklb nope, but once we'll release the new version of RTL we can push the ecosystem to do the same :)