Enzyme을 사용하여 React 구성 요소의 드롭다운을 테스트하는 방법은 무엇입니까?

안녕하세요, React 개발자 여러분! 오늘은 Enzyme을 사용하여 React 구성 요소의 드롭다운을 테스트하는 방법에 대해 이야기하겠습니다. 효소 공급자로서 저는 특히 성가신 드롭다운과 관련하여 React 프로젝트에서 적절한 테스트의 중요성을 직접 목격했습니다.

드롭다운 테스트가 중요한 이유

드롭다운은 React 애플리케이션의 일반적인 UI 구성요소입니다. 옵션 선택, 데이터 필터링, 메뉴 탐색과 같은 작업에 사용됩니다. 하지만 올바른 방향으로 나아가는 것이 까다로울 수도 있습니다. 드롭다운의 작은 버그로 인해 옵션이 올바르게 표시되지 않거나 드롭다운이 닫혀야 할 때 닫히지 않는 등 사용자 경험이 저하될 수 있습니다.

테스트가 필요한 곳입니다. 드롭다운에 대한 테스트를 작성하면 이러한 버그가 프로덕션에 적용되기 전 개발 프로세스 초기에 발견할 수 있습니다. 그리고 효소는 바로 그 일을 하기 위한 훌륭한 도구입니다.

효소 시작하기

드롭다운 테스트를 시작하기 전에 React 프로젝트에서 Enzyme을 설정하는 방법을 빠르게 살펴보겠습니다. 아직 설치하지 않았다면 React용 Enzyme과 해당 어댑터를 설치해야 합니다. npm 또는 Yarn을 사용하여 이 작업을 수행할 수 있습니다.

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

Enzyme을 설치한 후에는 React 버전에서 작동하도록 구성해야 합니다. 테스트 설정 파일(일반적으로src/setupTests.js), 다음 코드를 추가합니다.

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

이제 테스트를 시작할 준비가 되었습니다!

간단한 드롭다운 테스트

간단한 드롭다운 구성요소를 테스트하는 것부터 시작해 보겠습니다. 다음은 React의 기본 드롭다운 예입니다.

import React, 'react'에서 { useState }; const Dropdown = () => { const [isOpen, setIsOpen] = useState(false); const options = ['옵션 1', '옵션 2', '옵션 3']; constggleDropdown = () => { setIsOpen(!isOpen); }; return ( <div> <button onClick={toggleDropdown}>드롭다운 전환</button> {isOpen && ( <ul> {options.map((option, index) => ( <li key={index}>{option}</li> ))} </ul> )} </div> ); }; 기본 드롭다운 내보내기;

이 드롭다운을 테스트하기 위해 버튼을 클릭하면 옵션 목록의 표시 여부가 전환되는지 확인하려고 합니다. Enzyme을 사용하여 이를 수행하는 방법은 다음과 같습니다.

'반응'에서 반응을 가져옵니다; '효소'에서 {얕은 }을 가져옵니다. './Dropdown'에서 드롭다운 가져오기; explain('Dropdown', () => { it('버튼을 클릭하면 드롭다운을 토글해야 합니다.', () => { const Wrapper =shallow(<Dropdown />); const Button = Wrapper.find('button'); // 처음에는 드롭다운을 닫아야 합니다. Expect(wrapper.find('ul').exists()).toBe(false); // 드롭다운을 열려면 버튼을 클릭하세요. 버튼.simulate('click'); Expect(wrapper.find('ul').exists()).toBe(true); // 드롭다운을 닫으려면 버튼을 다시 클릭하세요.

이번 테스트에서는 먼저얕은렌더링하다드롭다운요소. 그런 다음 다음을 사용하여 버튼을 찾습니다.찾다다음을 사용하여 클릭 이벤트를 시뮬레이션합니다.시뮬레이션. 마지막으로 우리는존재한다옵션 목록이 표시되는지 확인합니다.

테스트 드롭다운 선택

이제 한 단계 더 나아가 드롭다운에서 옵션 선택을 테스트해 보겠습니다. 우리는 우리를 수정하겠습니다드롭다운옵션 선택을 처리하는 구성 요소:

import React, 'react'에서 { useState }; const Dropdown = () => { const [isOpen, setIsOpen] = useState(false); const [selectedOption, setSelectedOption] = useState(null); const options = ['옵션 1', '옵션 2', '옵션 3']; constggleDropdown = () => { setIsOpen(!isOpen); }; const selectOption = (옵션) => { setSelectedOption(옵션); setIsOpen(false); }; return ( <div> <button onClick={toggleDropdown}> {selectedOption ? selectedOption : '옵션 선택'} </button> {isOpen && ( <ul> {options.map((option, index) => ( <li key={index} onClick={() => selectOption(option)}> {option} </li> ))} </ul> )} </div> ); }; 기본 드롭다운 내보내기;

옵션 선택을 테스트하려면 옵션 중 하나를 클릭하는 것을 시뮬레이션하고 선택한 옵션이 올바르게 업데이트되었는지 확인해야 합니다. 테스트는 다음과 같습니다.

'반응'에서 반응을 가져옵니다; '효소'에서 {얕은 }을 가져옵니다. './Dropdown'에서 드롭다운 가져오기; explain('Dropdown', () => { it('클릭할 때 옵션을 선택해야 합니다.', () => { const Wrapper =shallow(<Dropdown />); const Button = Wrapper.find('button'); // 드롭다운을 엽니다.button.simulate('click'); // 첫 번째 옵션을 찾아 클릭합니다. const firstOption = Wrapper.find('li').first(); firstOption.simulate('click'); // 선택한 옵션이 업데이트되었습니다. Expect(wrapper.find('button').text()).toBe('Option 1') });

이 테스트에서는 먼저 버튼을 클릭하여 드롭다운을 엽니다. 그런 다음 다음을 사용하여 첫 번째 옵션을 찾습니다.첫 번째클릭을 시뮬레이션해 보세요. 마지막으로 선택한 옵션을 반영하도록 버튼의 텍스트가 업데이트되었는지 확인합니다.

더 복잡한 드롭다운을 사용한 테스트

실제 애플리케이션에서 드롭다운은 간단한 예보다 훨씬 더 복잡할 수 있습니다. 중첩된 옵션, 사용자 정의 스타일 또는 비동기 데이터 로드가 있을 수 있습니다. 이러한 보다 복잡한 드롭다운을 테스트할 때는 그에 따라 테스트 전략을 조정해야 합니다.

예를 들어 드롭다운에 중첩된 옵션이 있는 경우 상위 옵션과 하위 옵션 모두의 동작을 테스트해야 합니다. 드롭다운에서 특정 요소를 찾으려면 고급 효소 선택기를 사용해야 할 수도 있습니다.

드롭다운이 데이터를 비동기적으로 로드하는 경우 다음과 같은 기술을 사용해야 합니다.비동기/대기또는setTimeout테스트를 실행하기 전에 데이터가 로드될 때까지 기다리세요. 다음은 비동기 드롭다운을 테스트하는 예입니다.

import React, { useState, useEffect } from 'react'; const AsyncDropdown = () => { const [isOpen, setIsOpen] = useState(false); const [옵션, setOptions] = useState([]); useEffect(() => { const fetchOptions = async () => { const response = wait fetch('https://api.example.com/options'); const data = wait response.json(); setOptions(data); }; if (isOpen) { fetchOptions(); } }, [isOpen]); constggleDropdown = () => { setIsOpen(!isOpen); }; return ( <div> <button onClick={toggleDropdown}>드롭다운 전환</button> {isOpen && ( <ul> {options.map((option, index) => ( <li key={index}>{option}</li> ))} </ul> )} </div> ); }; 기본 AsyncDropdown 내보내기;

'반응'에서 반응을 가져옵니다; '효소'에서 {얕은 }을 가져옵니다. './AsyncDropdown'에서 AsyncDropdown을 가져옵니다. explain('AsyncDropdown', () => { it('드롭다운이 열릴 때 옵션을 로드해야 합니다.', async () => { global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve(['Option 1', 'Option 2', 'Option 3']), }) ); const 래퍼 = 얕은(<AsyncDropdown />); const 버튼 = 래퍼.find('button'); // 드롭다운 열기 버튼.simulate('click'); // 옵션이 로드될 때까지 기다립니다. // 옵션이 로드되었는지 확인하세요. Expect(wrapper.find('li').length).toBe(3) });

이 테스트에서는is.fn조롱하다술책API를 사용하고 일부 샘플 데이터를 반환합니다. 그런 다음 드롭다운을 열고 다음을 사용하여 옵션이 로드될 때까지 기다립니다.Wrapper.update()를 기다립니다.. 마지막으로 올바른 수의 옵션이 렌더링되는지 확인합니다.