TIL

InputName.jsx에서 label htmlFor=”input-name” 사용할 때 뜨는 오류

React JSX에 대한 접근성 규칙 집합인 ESLint 플러그인 "jsx-a11y"의 "jsx-a11y/label-has-associated-control" 규칙에 대한 규칙 구성입니다.

"label-has-associated-control" 규칙은 각 레이블 요소에 입력, 선택 또는 텍스트 영역 요소와 같은 연결된 양식 컨트롤이 있는지 여부를 확인합니다. 스크린 리더 및 기타 보조 기술은 컨텍스트를 제공하고 사용자가 각 컨트롤의 목적을 이해하는 데 도움을 주기 위해 레이블과 양식 컨트롤 간의 관계에 의존하기 때문에 액세스 가능성에 중요합니다.

{ assert: 'either' } 구성은 규칙이 각 레이블 요소에 연결된 양식 컨트롤이 있는지 확인하고 다음 중 하나를 수행해야 함을 의미합니다.

• 레이블 요소의 for 속성이 연결된 양식 컨트롤의 id 속성과 일치하거나,
• 레이블 요소는 연결된 양식 컨트롤을 하위 요소로 래핑합니다.

이러한 조건이 모두 충족되지 않으면 규칙은 심각도 수준이 "오류"인 오류를 보고합니다.

 

 

jest.fn()

코드는 handleChange 변수를 선언하고 Jest 모의 함수 jest.fn()의 새 인스턴스를 할당합니다.

Jest fn() 메서드는 테스트 환경에서 함수를 시뮬레이트하는 데 사용할 수 있는 새로운 빈 모의 함수를 만듭니다.

이 경우 'handleChange' 모의 함수를 사용하여 테스트 시나리오에서 실제 함수를 대체한 다음 특정 인수로 호출되었는지 또는 호출 횟수를 확인할 수 있습니다.

예를 들어 handleChange가 React 구성 요소에 소품으로 전달된 경우 테스트는 handleChange 함수를 트리거하는 사용자 상호 작용을 시뮬레이션한 다음 jest.fn() 메서드를 사용하여 함수가 예상대로 불렸다.

이 기술은 일반적으로 단위 테스트에서 코드가 다른 시나리오에서 올바르게 작동하고 모든 구성 요소와 기능이 예상대로 함께 작동하는지 확인하는 데 사용됩니다.