[javascript] Enzyme과 함께 사용하는 문제 해결 도구

29 Nov 2023

javascript

Enzyme은 React 컴포넌트의 테스트를 도와주는 유용한 도구입니다. 그러나 때로는 Enzyme을 사용하는 도중 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 몇 가지 도구를 소개하겠습니다.

1. Enzyme-to-json

Enzyme-to-json은 Enzyme을 사용하여 렌더링된 React 컴포넌트의 스냅샷을 생성하고 비교하는 데 도움을 줍니다. 이를 사용하면 테스트 결과의 일관성을 유지하면서 테스트를 더 쉽게 작성할 수 있습니다.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import toJson from 'enzyme-to-json';

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

it('renders correctly', () => {
  const component = shallow(<MyComponent />);
  expect(toJson(component)).toMatchSnapshot();
});

2. eslint-plugin-jest

eslint-plugin-jest는 Jest와 함께 사용할 수 있는 ESLint 플러그인입니다. 이 플러그인을 사용하면 코드에 대한 테스트 커버리지를 검사하고 잠재적인 버그를 사전에 확인할 수 있습니다.

// .eslintrc.js

module.exports = {
  plugins: ['jest'],
  extends: ['plugin:jest/recommended'],
};

3. sinon

sinon은 테스트 중에 스파이, 스텁, 목 객체를 생성하고 관리할 수 있게 도와주는 라이브러리입니다. 이를 사용하면 테스트 중에 외부 의존성을 가짜로 대체함으로써 테스트의 안정성을 높일 수 있습니다.

import sinon from 'sinon';

it('calls callback function', () => {
  const callback = sinon.spy();
  myFunction(callback);
  expect(callback.calledOnce).toBe(true);
});

4. jest-enzyme

jest-enzyme은 Jest와 함께 사용할 수 있는 Enzyme 확장 라이브러리입니다. 이를 사용하면 Jest 테스트에서 Enzyme의 메소드 및 어설션을 사용할 수 있습니다.

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

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

it('renders a heading', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper).toContainMatchingElement('h1');
});

이러한 도구를 사용하면 Enzyme을 더욱 효과적으로 활용하고 문제를 해결할 수 있습니다. 각 도구의 문서를 참조하여 자세한 사용 방법과 설정 방법을 확인하십시오.

참고 문서: