Enzyme은 React 컴포넌트를 테스트하기위한 JavaScript 라이브러리입니다. 이 라이브러리는 React 테스트의 생산성을 향상시키고 컴포넌트의 동작을 검증하는데 도움이 됩니다. 이 글에서는 Enzyme의 테스트 러너 설정에 대해 알아보겠습니다.

Jest를 사용한 테스트 러너 설정

Jest는 React 애플리케이션의 테스트를 위한 강력한 JavaScript 테스트 러너입니다. Enzyme을 사용하기 위해서는 Jest와 함께 설정해야 합니다. 다음은 Jest를 사용하여 Enzyme을 설정하는 단계입니다.

1. 프로젝트 루트 디렉토리에 jest.config.js 파일을 생성합니다.

2. jest.config.js 파일에 다음과 같이 설정을 추가합니다.

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/enzyme.setup.js'],
};

1. npm install enzyme enzyme-adapter-react-16 명령어를 사용하여 Enzyme과 Enzyme의 React 16 어댑터를 설치합니다.

2. 프로젝트 루트 디렉토리에 enzyme.setup.js 파일을 생성합니다.

3. enzyme.setup.js 파일에 다음과 같이 설정을 추가합니다.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

1. 이제 Jest를 사용하여 React 컴포넌트를 테스트할 수 있습니다. 테스트 파일에서 import Enzyme from 'enzyme';를 추가하고, 필요한 위치에서 Enzyme의 테스트 래퍼를 사용할 수 있습니다.

import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent />);
    // 테스트 로직 작성
  });
});

Jest와 Enzyme을 함께 사용하면 React 컴포넌트를 효과적으로 테스트할 수 있습니다.

참고 자료

• Enzyme 공식 문서: https://enzymejs.github.io/enzyme/
• Jest 공식 문서: https://jestjs.io/