React 애플리케이션을 테스트할 때, Enzyme은 컴포넌트의 렌더링과 상태 변화를 감지하는 데에 유용한 도구입니다. 하지만 Enzyme으로 데이터베이스와의 연동을 테스트하는 것은 복잡할 수 있습니다. 이 글에서는 Enzyme을 사용하여 데이터베이스와 연동된 컴포넌트를 테스트하는 방법에 대해 알아보겠습니다.
1. 데이터베이스 연동 컴포넌트 생성
먼저, 데이터베이스와 연동된 컴포넌트를 생성해야 합니다. 예를 들어, 데이터베이스에서 사용자 정보를 불러와 화면에 표시하는 컴포넌트를 생성한다고 가정해봅시다.
import React, { useState, useEffect } from 'react';
import { getUserInfo } from './api'; // 데이터베이스와 통신하는 API 메소드
const UserInfo = () => {
const [userInfo, setUserInfo] = useState(null);
useEffect(() => {
getUserInfo().then((data) => {
setUserInfo(data);
});
}, []);
return (
<div>
{userInfo ? (
<div>
<h2>{userInfo.name}</h2>
<p>{userInfo.email}</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
};
export default UserInfo;
위의 예제에서 getUserInfo는 데이터베이스로부터 사용자 정보를 가져오는 API 메소드입니다. 이 컴포넌트는 userInfo 상태를 사용하여 사용자 정보를 화면에 표시합니다.
2. 데이터베이스 연동 컴포넌트 테스트
이제 Enzyme을 사용하여 데이터베이스 연동 컴포넌트를 테스트해보겠습니다. 먼저, 필요한 패키지를 설치해야 합니다.
npm install --save enzyme enzyme-adapter-react-16 enzyme-to-json
다음으로, 테스트 파일을 생성한 후 다음과 같이 작성합니다.
import React from 'react';
import { shallow } from 'enzyme';
import UserInfo from './UserInfo';
describe('UserInfo 컴포넌트', () => {
it('로드 중일 때 "Loading..."을 표시해야 함', () => {
const wrapper = shallow(<UserInfo />);
expect(wrapper.text()).toEqual('Loading...');
});
it('정상적으로 사용자 정보를 표시해야 함', () => {
const mockData = {
name: 'John Doe',
email: 'johndoe@example.com',
};
const wrapper = shallow(<UserInfo />);
wrapper.setState({ userInfo: mockData });
expect(wrapper.find('h2').text()).toEqual(mockData.name);
expect(wrapper.find('p').text()).toEqual(mockData.email);
});
});
위 예제에서는 UserInfo 컴포넌트가 로딩 중일 때 ‘Loading…‘을 표시하고, 사용자 정보를 정상적으로 표시하는지를 테스트합니다. shallow 함수를 사용하여 컴포넌트를 렌더링하고, 각각의 상태 변화를 시뮬레이션하기 위해 setState를 사용합니다.
위의 테스트 파일을 실행하면, Enzyme을 사용하여 데이터베이스와의 연동된 컴포넌트를 테스트할 수 있습니다.
결론
이 글에서는 Enzyme을 사용하여 데이터베이스와 연동된 컴포넌트를 테스트하는 방법에 대해 알아보았습니다. Enzyme은 React 애플리케이션의 테스트를 용이하게 해주는 강력한 도구입니다. 데이터베이스와 연동된 컴포넌트를 테스트할 때에도 Enzyme을 활용하면 효과적인 테스트 코드를 작성할 수 있습니다.