Enzyme 사용 시 Cannot read property 'child'... 가 출력될 때

이슈 내용 : Enzyme 사용 시, mount 함수를 사용해 스냅샷 테스팅을 진행하면 TypeError: Cannot read property 'child' of undefined 오류가 출력됨.

간단한 오류입니다!

Enzyme으로 테스팅을 진행할 때, 컴포넌트에는 아무런 오류가 없음에도 "Cannot read property 'child' of undefined" 라는 오류가 출력될 때가 있습니다.

import { mount } from "enzyme";
import Profile from "./Profile";

describe("<Profile />", () => {
  it("matches snapshot", () => {
    const wrapper = mount(<Profile username="c17an" name="김찬민" />);
    expect(wrapper).toMatchSnapshot();
  });
});

원인은 바로 Enzyme 어댑터의 버전입니다.

Enzyme 어댑터는 리액트의 버전을 정말 철저하게 구분하는데요, 어댑터의 버전이 높다고 해서 하위 버전의 리액트를 커버할 수 있는 것이 아니므로 표에 명시된 대로 어댑터를 리액트 버전에 맞춰야 합니다.

 

다만 주의해야 할 점은 현재 최신 리액트 버전은 17.0.2 인데, 공식 엔자임 어댑터는 버전 16에 머물고 있다는 점입니다.

저의 경우에는 바로 이것이 원인이었는데요, 다른 개발자분이 제작한 리액트 17 버전의 어댑터를 설치함으로써 문제를 해결할 수 있었습니다. (다만 정식으로 에어비앤비에서 만든 것 같지는 않습니다!)

@wojtekmaj/enzyme-adapter-react-17

사용 방법은 이전 버전과 완전히 동일하며, setupTest.js의 어댑터 모듈만 교체해주면 됩니다!

import { configure } from "enzyme";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";

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

테스트 성공!