logRoles : Roles 디버깅하기

logRoles

• DOM 노드 트리 내의 모든 암시적 ARIA 역할의 목록을 출력하는 데 사용할 수 있는 Testing Library의 헬퍼 함수
• 각 Role에는 해당 Role과 일치하는 모든 노드의 목록이 포함된다.
• getByRole을 사용하여 테스트 중인 DOM을 쿼리하는 방법을 찾는 데 유용.

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

test('button has correct initial color', () => {
  const { container } = render(<App />);

  logRoles(container); 

  const colorButton = screen.getByRole('button', { name: 'Change to blue' });
  const colorButton2 = screen.getByRole('button', { name: 'Change to red' });

  expect(colorButton).toHaveStyle({ backgroundColor: 'red ' });
});

• 이런 식으로 console.log에 각 Role에 해당하는 목록이 보여짐