React Testing Libraryで特定要素の子要素の中身を取得したい

Question

聞きたいこと

React Testing Library + Jest でUIのテストを実装しています。
特定の要素の子要素の中身の確認が適切か確認したいと思っているのですが、子要素の中身を取得する方法を模索しています。

イメージとしては、data-testid 属性が test-id の要素の子要素の値を取得してきて、値自体をテストしたいと思っています。

下に実際のテストコードとテスト対象のコードを載せます。

• App.test.tsx

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

test('renders learn react link', () => {
  render(<App />);
  
  const testElement = screen.getByTestId('test-id' )
  
  // 親要素をtestElementに代入したので、その子要素にの値を取得して値を比較したい。

});

• App.tsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <div data-testid='test-id'>
        <span>abcdefghi</span>
      </div>
    </div>
  );
}

export default App;

Answer 1

こちら試されてみてはどうでしょう？
https://www.366service.com/jp/qa/ff156630a03a5595693413378b26c945