텍스트 렌더를 테스트하는 두가지 방법

1

원하는 텍스트 Hello world를 가지고 있는 엘리먼트를 선택하여 해당 엘리먼트가 실제로 렌더 트리에 존재하는지 확인하는 방법.

test('텍스트를 렌더합니다.', () => {
  render(<p>Hello world</p>);
  const element = screen.getByText('Hello world');
  expect(buttonEl).toBeInTheDocument();
});

2

특정 엘리먼트를 선택하여 textContent가 원하는 텍스트 Hello world와 일치하는지 확인하는 방법.

test('텍스트를 렌더합니다.', () => {
  render(<p data-testid="my-text">Hello world</p>);
  const element = screen.getByTestId('my-text');
  expect(element.textContent).toBe('Hello world');
});