Enzyme은 React 컴포넌트를 테스트하기 위한 인기있는 JavaScript 라이브러리입니다. Enzyme을 사용하면 컴포넌트의 렌더링 결과를 쉽게 테스트할 수 있습니다. 그러나 때로는 테스트 중에 외부 데이터나 함수 호출을 가로채야 할 수도 있습니다.

이때 Enzyme은 데이터 모의(Mocking) 테스트 도구들과 함께 사용될 수 있습니다. 데이터 모의(Mocking)란 실제 데이터 대신 가짜 데이터를 사용하여 테스트를 수행하는 것입니다. 이는 외부 서비스와의 의존성을 줄이고 테스트의 격리성을 높이는 데 도움이 됩니다.

다음은 Enzyme과 함께 사용할 수 있는 몇 가지 인기있는 데이터 모의(Mocking) 테스트 도구입니다.

1. Sinon.js

Sinon.js는 JavaScript 테스트 라이브러리로서 가짜 함수를 생성하고 호출된 매개변수, 반환 값 등을 추적할 수 있습니다. 이를 통해 외부 함수 호출을 가로채어 원하는 데이터로 대체할 수 있습니다. Sinon.js는 Enzyme과 함께 사용되면 AJAX 요청, 타이머 등과 같은 외부 호출을 테스트하는 데 유용합니다.

import sinon from 'sinon';

// 실제 함수를 가로채기 위해 sinon.spy()를 사용
const fetchData = sinon.spy();

// 가짜 데이터로 가로챈 fetchData 함수를 컴포넌트에 전달
const wrapper = shallow(<MyComponent fetchData={fetchData} />);

2. axios-mock-adapter

axios-mock-adapter는 axios HTTP 클라이언트를 위한 mock adapter입니다. 이를 사용하여 AJAX 요청을 가로채고 가짜 응답을 반환할 수 있습니다. axios-mock-adapter는 Enzyme과 함께 사용되어 컴포넌트 내부에서의 AJAX 요청을 테스트하는 데 유용합니다.

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

// 가짜 응답을 정의
mock.onGet('/api/data').reply(200, {
  data: 'mocked data'
});

// AJAX 요청을 테스트하기 위해 컴포넌트를 렌더링
const wrapper = shallow(<MyComponent />);
await wrapper.instance().fetchData();

// 가짜 응답이 올바르게 처리되었는지 테스트
expect(wrapper.state('data')).toEqual('mocked data');

3. localStorageMock

localStorageMock는 localStorage를 모의(Mock)하는 도구입니다. localStorage를 사용하는 컴포넌트를 테스트할 때 유용하게 사용할 수 있습니다. localStorageMock는 Enzyme과 함께 사용되어 localStorage에 저장되는 데이터를 가로채고 제어하는 데 도움을 줍니다.

import { localStorageMock } from 'localStorageMock';

// 모의(localStorageMock)를 사용하여 컴포넌트를 렌더링
const wrapper = shallow(<MyComponent />, { context: { localStorage: localStorageMock } });

// localStorage에 값을 저장
wrapper.instance().saveDataToLocalStorage();

// 모의(localStorageMock)의 저장된 값에 접근하여 검증
expect(localStorageMock.getItem('data')).toEqual('test data');

위에서 소개한 이 세 가지 데이터 모의(Mocking) 테스트 도구는 Enzyme과 함께 사용하여 컴포넌트 테스트 시 외부 호출이나 데이터를 모의할 수 있습니다. 이를 통해 더 견고하고 격리된 테스트를 수행할 수 있습니다.

더 많은 데이터 모의(Mocking) 테스트 도구를 찾으시려면 각 도구의 공식 문서를 참조하십시오.

참고:
Sinon.js 공식 문서
Axios Mock Adapter 공식 문서