Enzyme을 사용하여 React 구성 요소의 이벤트 핸들러를 테스트하는 방법은 무엇입니까?

React 구성 요소에서 이벤트 핸들러를 테스트하는 것은 애플리케이션의 안정성과 기능을 보장하는 중요한 측면입니다. React의 인기 있는 테스트 유틸리티인 Enzyme은 이 프로세스를 단순화하는 강력한 도구 세트를 제공합니다. 효소 공급업체로서 우리는 React 구성 요소, 특히 이벤트 핸들러를 테스트할 때 개발자가 직면하는 어려움을 이해합니다. 이 블로그 게시물에서는 Enzyme을 사용하여 React 구성 요소에서 이벤트 핸들러를 효과적으로 테스트하는 방법을 살펴보겠습니다.

React의 이벤트 핸들러 이해

테스트를 시작하기 전에 React에 어떤 이벤트 핸들러가 있는지 이해하는 것이 중요합니다. 이벤트 핸들러는 클릭, 키 누르기 또는 양식 제출과 같은 특정 이벤트에 대한 응답으로 트리거되는 함수입니다. React에서 이러한 핸들러는 일반적으로 구성 요소 클래스 내의 메서드 또는 기능 구성 요소의 화살표 함수로 정의됩니다.

다음은 이벤트 핸들러가 포함된 기능적 React 구성 요소의 간단한 예입니다.

'반응'에서 반응을 가져옵니다; const ButtonComponent = () => { const handlerClick = () => { console.log('버튼이 클릭되었습니다!'); }; return ( <button onClick={handleClick}>나를 클릭하세요</button> ); }; 기본 ButtonComponent 내보내기;

이 예에서는핸들클릭함수는 버튼을 클릭할 때 호출되는 이벤트 핸들러입니다.

테스트를 위한 효소 설정

Enzyme을 사용하여 이벤트 핸들러 테스트를 시작하려면 테스트 환경을 설정해야 합니다. 먼저 프로젝트에 Enzyme과 해당 어댑터가 설치되어 있는지 확인하세요. npm 또는 Yarn을 사용하여 설치할 수 있습니다.

npm install --save-dev 효소 효소-어댑터-반응-16

다음으로, 테스트 설정 파일에서 적절한 어댑터를 사용하도록 Enzyme을 구성합니다. React 16의 경우 다음 코드를 사용할 수 있습니다.

'효소'에서 효소를 가져옵니다. 'enzyme-adapter-react-16'에서 어댑터 가져오기; Enzyme.configure({ 어댑터: 새 어댑터() });

효소를 사용한 이벤트 핸들러 테스트

이제 테스트 환경이 설정되었으므로 Enzyme을 사용하여 이벤트 핸들러를 테스트하는 방법을 살펴보겠습니다. Enzyme은 다음과 같이 React 구성 요소에서 이벤트를 시뮬레이션하는 여러 가지 방법을 제공합니다.시뮬레이션.

클릭 이벤트 시뮬레이션

테스트해보자버튼구성요소우리는 앞서 정의했습니다. 클릭 이벤트를 시뮬레이션하고 이벤트 핸들러가 호출되는지 확인하는 방법은 다음과 같습니다.

'반응'에서 반응을 가져옵니다; '효소'에서 {얕은 }을 가져옵니다. './ButtonComponent'에서 ButtonComponent를 가져옵니다. explain('ButtonComponent', () => { it('버튼을 클릭하면 handlerClick을 호출해야 합니다.', () => { const Wrapper =shallow(<ButtonComponent />); const spy = jest.spyOn(wrapper.instance(), 'handleClick');wrapper.instance().forceUpdate();wrapper.find('button').simulate('click'); 기대(spy).toHaveBeenCalled() });

이 테스트에서는 먼저 얕은 렌더링을 만듭니다.버튼구성요소효소를 이용해서얕은방법. 그런 다음 스파이를 만듭니다.핸들클릭Jest를 사용하는 함수스파이온방법. 그런 다음 스파이가 올바르게 연결되었는지 확인하기 위해 구성 요소 인스턴스를 강제로 업데이트합니다. 마지막으로 다음을 사용하여 버튼의 클릭 이벤트를 시뮬레이션합니다.시뮬레이션방법을 사용하여 스파이가 호출되었는지 확인합니다.

인수를 사용하여 이벤트 처리기 테스트

때로는 이벤트 핸들러가 인수를 받아들일 수도 있습니다. 예를 들어 다음 구성요소를 고려해보세요.

'반응'에서 반응을 가져옵니다; const InputComponent = () => { const handlerChange = (event) => { console.log('입력 값이 변경되었습니다:', event.target.value); }; return ( <input type="text" onChange={handleChange} /> ); }; 기본 InputComponent 내보내기;

이 구성요소를 테스트하려면 이벤트 개체를시뮬레이션방법. 방법은 다음과 같습니다.

'반응'에서 반응을 가져옵니다; '효소'에서 {얕은 }을 가져옵니다. './InputComponent'에서 InputComponent를 가져옵니다. explain('InputComponent', () => { it('입력이 변경되면 올바른 값으로 handlerChange를 호출해야 합니다.', () => { const Wrapper =shallow(<InputComponent />); const spy = jest.spyOn(wrapper.instance(), 'handleChange'); Wrapper.instance().forceUpdate(); const event = { target: { value: 'test' } }; Wrapper.find('input').simulate('change', event); Expect(spy).toHaveBeenCalledWith(event) });

이 테스트에서는 다음을 사용하여 모의 이벤트 객체를 만듭니다.목표새 입력 값을 포함하는 속성입니다. 그런 다음 이 이벤트 객체를 두 번째 인수로 전달합니다.시뮬레이션방법. 마지막으로 우리는핸들변경함수가 올바른 이벤트 객체로 호출되었습니다.

복잡한 이벤트 핸들러 테스트

경우에 따라 이벤트 핸들러에는 API 호출 또는 구성 요소 상태 업데이트와 같은 복잡한 논리가 있을 수 있습니다. 이러한 유형의 이벤트 핸들러를 테스트하려면 외부 종속성 모의와 같은 추가 테스트 기술을 사용해야 할 수도 있습니다.

예를 들어, 버튼을 클릭할 때 API를 호출하는 다음 구성 요소를 생각해 보세요.

'반응'에서 반응을 가져옵니다; 'axios'에서 axios를 가져옵니다. const ApiComponent = () => { const handlerClick = async () => { try { const response = wait axios.get('https://api.example.com/data'); console.log('API 응답:', response.data); } catch (오류) { console.error('API 오류:', 오류); } }; return ( <button onClick={handleClick}>데이터 가져오기</button> ); }; 기본 ApiComponent 내보내기;

이 구성요소를 테스트하기 위해 Jest를 사용할 수 있습니다.is.mock조롱하는 함수액시오스기준 치수. 방법은 다음과 같습니다.

'반응'에서 반응을 가져옵니다; '효소'에서 {얕은 }을 가져옵니다. './ApiComponent'에서 ApiComponent를 가져옵니다. 'axios'에서 axios를 가져옵니다. jest.mock('axios'); explain('ApiComponent', () => { it('버튼을 클릭하면 axios.get을 호출해야 합니다.', async () => { const 래퍼 = 얕은(<ApiComponent />); const spy = jest.spyOn(wrapper.instance(), 'handleClick'); 래퍼.instance().forceUpdate(); const mockResponse = { data: { message: 'Success' } }; axios.get.mockResolvedValue(mockResponse); wait Wrapper.find('button').simulate('click'); Expect(spy).toHaveBeenCalledWith('https://api.example.com/data') });

이 테스트에서 우리는 먼저액시오스모듈을 사용하는is.mock. 그런 다음 모의 응답 객체를 생성하고 이를 해결된 값으로 설정합니다.axios.get사용하는 방법mockResolvedValue. 마지막으로 버튼의 클릭 이벤트를 시뮬레이션하고핸들클릭함수가 호출되었고axios.get올바른 URL로 호출되었습니다.