“Jest와 Enzyme으로 React 컴포넌트 메소드를 Mock하여 기능 테스트 하는 방법”

Jest와 Enzyme를 사용하여 React 컴포넌트 메소드를 모킹하는 방법

React 컴포넌트를 테스트할 때는 특정 메소드를 모킹하여 특정 기능을 격리하고 테스트하는 것이 종종 필요합니다. 이 블로그 포스트에서는 Jest와 Enzyme을 사용하여 React 컴포넌트 메소드를 올바르게 모킹하는 방법을 살펴보겠습니다.

문제 이해하기

간단화된 예제로 React 컴포넌트인 MyComponent를 고려해봅시다. 이 컴포넌트에는 handleNameInput과 searchDish라는 두 개의 메소드가 있습니다. handleNameInput 메소드는 제공된 값과 함께 searchDish 메소드를 호출합니다. 우리는 handleNameInput이 주어진 값으로 searchDish를 올바르게 호출하는지 테스트하고 싶습니다.

class MyComponent extends Component {
  handleNameInput = (value) => {
    this.searchDish(value);
  };

  searchDish = (value) => {
    // 어떤 일을 수행합니다
  };

  render() {
    return(<div></div>);
  }
}

컴포넌트 메소드 모킹하기

searchDish 메소드를 모킹하기 위해 컴포넌트 메소드를 대체하는 Jest 모킹 함수를 만들 수 있습니다. 다음은 Jest와 Enzyme을 사용한 예제 테스트 케이스입니다:

it('handleNameInput', () => {
  let wrapper = shallow(<MyComponent/>);
  wrapper.instance().searchDish = jest.fn();
  wrapper.update();
  wrapper.instance().handleNameInput('BoB');
  expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
});

그러나 이 테스트를 실행할 때 콘솔에서 “SyntaxError: XMLHttpRequest.open” 오류가 발생할 수 있습니다. 이 오류는 메소드를 인스턴스에 잘못 할당하고 메소드를 모킹한 후 .update()을 호출하지 않아 발생하는 오류입니다.

컴포넌트 메소드 올바르게 모킹하기

Jest와 Enzyme을 사용하여 컴포넌트 메소드를 올바르게 모킹하기 위해서는 테스트 케이스에 몇 가지 조정을 해야 합니다. 먼저 wrapper.instance()를 사용하여 모킹된 함수를 컴포넌트의 인스턴스에 할당합니다. 그런 다음 래퍼에 .update()를 호출하여 모킹된 함수를 올바르게 등록합니다:

it('handleNameInput', () => {
  let wrapper = shallow(<MyComponent/>);
  const searchDishMock = jest.fn();
  wrapper.instance().searchDish = searchDishMock;
  wrapper.update();
  wrapper.instance().handleNameInput('BoB');
  expect(searchDishMock).toBeCalledWith('BoB');
});

이러한 단계를 따르면 React 컴포넌트 메소드를 성공적으로 모킹하고 문법 오류 없이 기능을 테스트할 수 있습니다. 모킹된 함수를 인스턴스에 할당하고 래퍼에 .update()를 호출하고 어설션을 사용하여 예상 동작을 확인하는 것을 기억하세요.

요약

이 블로그 포스트에서는 Jest와 Enzyme을 사용하여 React 컴포넌트 메소드를 모킹하는 방법을 배웠습니다. 컴포넌트 메소드를 올바르게 모킹함으로써 특정 기능을 격리하여 테스트하고 컴포넌트가 예상대로 동작하도록 할 수 있습니다. 모킹된 함수를 인스턴스에 할당하고 래퍼에 .update()를 호출하고 어설션을 사용하여 예상 동작을 확인하는 것을 기억하세요. 즐거운 테스팅하세요!

참고 자료 : 

reactjs