I'm using react-testing-libarary to test my react application. For some reason, I need to be able to find the element by id and not data-testid. There is no way to achieve this in the documentation.
Is there a way to achieve this?
I have the rendered output as follows:
const dom = render(<App />);
I'm looking for something along the lines of:
const input = dom.getElementById('firstinput');
//or
const input = dom.getById('firstinput');
I feel like none of the answers really gave a complete solution, so here it is:
const result = render(<SomeComponent />);
const someElement = result.container.querySelector('#some-id');
result.debug() I can clearly see the element with that id. :(
I found a way to do this.
import App from './App';
import { render, queryByAttribute } from 'react-testing-library';
const getById = queryByAttribute.bind(null, 'id');
const dom = render(<App />);
const table = getById(dom.container, 'directory-table');
I hope this helps.
document.getElementById. But the ID of an element is an implemention detail and I recommend against using it.
It looks you have DOM node itself as a container. Therefore, you should be able to call .querySelector('#firstinput') with that.
react-testing-library helpers on this returned node.
There are two ways to do so
container.getElementById('id'). In the end, all the helpers are doing is making queries like this one under the hoodAs a final note, if you can avoid looking for elements by id it's better.
container my guess is that it's not what you're looking for
TS2339: Property 'getElementById' does not exist on type 'HTMLElement'.
getElementById is not even present on RTL docs '-' For me the correct way is using the this tool: chrome.google.com/webstore/detail/testing-playground/… I never spent time adding/looking for ids again.getElementById is not in the docs because it's not an API of RTL, it's a DOM API, supported by all browsers. The error @pbialy and @mihai-zamfir are experiencing is a TypeScript error and has nothing to do with RTL.You can set up with testIdAttribute in the configuration.
configure({ testIdAttribute: 'id' })
https://testing-library.com/docs/dom-testing-library/api-configuration
The setting has pros and cons. The benefit of it is that you can set an id for multiple uses. (Test id, marketing analytics, tag manager, ...etc) You don't have to add both id and test-id. It's good for the conciseness of the code.
But be careful, you might accidentally set the same id at two different components on the same page. Remember to add index or identification to a component id for list items.
testIdAttribute: The attribute used by getByTestId and related queries. Defaults to data-testid.
testIdAttribute is not a bad idea in itself.My advice: stop adding and searching by ids, this always takes to much time and effort because you have to add the ids (sometimes test-ids) and then find out the best way to query the element. But even if you really need an id, this tool will save you a lot of time by showing the best way to query any DOM element on your screen: Testing Playground
If you use TypeScript, and want to get a non-null result, here's a convenience function:
function getById<T extends Element>(container: HTMLElement, id: string): T {
const element = container.querySelector<T>(`#${id}`);
assert(element !== null, `Unable to find an element with ID #${id}.`)
return element;
}
You can then use it like this:
import { render } from '@testing-library/react';
const { container } = render(<App />);
const myInputElement = getById<HTMLInputElement>(container, 'myInputElement');
await waitFor(() => {
const innerOverlay = queryByAttribute("id", baseElement, "yourId");
expect(innerOverlay).toBeTruthy();
});
I haven't find anyway to findBy and attribute, however it has queryByAttribute. So we can use it with waitFor to make it similar with findBy
document.getElementById('firstinput')