React Testing - get text inside an element - reactjs

Question

I am coding a couple of tests for my app. I want to check that after saving time, it goes to the list.
Now I got this test working by finding a text from the screen, but I want to specify it by id. I mean to check that this 00:01:00 is really in the right place, not just somewhere on the page. I hope guys understand what I mean.
How can I do this?
This is working by finding from screen:
test("Time saved", async () => {
render(<SecondTimer />);
const start = screen.getByText("START");
fireEvent.click(start);
await waitFor(() => screen.getByText(/00:01:00/i), {
timeout: 2000
});
const pause = screen.getByText("PAUSE");
fireEvent.click(pause);
const saveTime = screen.getByText("SAVE TIME");
fireEvent.click(saveTime);
const history = screen.queryByText(/00:01:00/i);
screen.debug(); // printtaa renderinnin consoliin
});
I have DIV like this:
<div data-testid={'aikalista'} className={'tulostaulu'}>
<ul>
{this.state.aikoja === false && ('No times my friend!')}
{this.state.aikoja === true && (<div>{this.state.history.map((item, index) => <li key={index}>{item}</li>)}</div>)}
</ul>
This is what I've tried with different variations, but no luck.
test("Time saved v2", async () => {
render(<SecondTimer />);
const start = screen.getByText("START");
fireEvent.click(start);
await waitFor(() => screen.getByText(/00:01:00/i), {
timeout: 2000
});
const pause = screen.getByText("PAUSE");
fireEvent.click(pause);
const saveTime = screen.getByText("SAVE TIME");
fireEvent.click(saveTime);
const aikalista = screen.getByTestId('aikalista');
expect(getByTestId('aikalista').textContent).toEqual(/00:01:00/i)
screen.debug(); // printtaa renderinnin consoliin
});

Answer 1

getByText has this signature.
getByText(
container: HTMLElement, // if you're using `screen`, then skip this argument
text: TextMatch,
options?: {
selector?: string = '*',
exact?: boolean = true,
ignore?: string|boolean = 'script, style',
normalizer?: NormalizerFn,
}): HTMLElement
You can you use this selector property inside options object to select the element. So you can write something like this.
screen.getByText(/00:01:00/i, {selector: "#someId"})
You can check if the element has an id you want after you get it by text also.
const element = screen.getByText(/00:01:00/i);
expect(element).toHaveAttribute('id', "someId");