---
type: snippet
tags: ['enzyme', 'test', 'react-testing-library']
status: release
ctime: 2024-07-11
mtime: 2026-07-27
---

최근에 [Enzyme](https://github.com/enzymejs/enzyme)을 제거하고 [React Testing Library](https://github.com/testing-library/react-testing-library)로 교체하는 작업을 진행했습니다. [JSX](https://facebook.github.io/jsx/) 영역은 별 문제 없이 진행되었으나, state나 props를 다루는 구현 부분에서 약간의 애매함이 있었습니다. 개인적으로는 기존 접근 방식이 나쁘지 않았다고 생각했기 때문에, 새로운 접근 방식으로 전환하는 데 주저하게 되었습니다.

결론적으로, state와 props의 JSON 결과물을 렌더링하고 [getByTestId](https://testing-library.com/docs/queries/bytestid/)를 사용하여 이를 참조하는 방식으로 테스트를 진행하기로 했습니다. 다음은 그 예시입니다:

```tsx
render() {
  return <>
    {process.env.NODE_ENV === 'test' && (
      <pre data-testid="ThumbnailDebug">
        {JSON.stringify({
          props: this.props,
          state: this.state,
        })}
      </pre>
    )}
  </>
}
```

이 방법을 통해 Enzyme을 제거한다는 목표를 달성했기 때문에, 어느 정도는 해결된 것처럼 보이며, 추후 더 나은 테스트 코드를 작성하기 위한 고민을 할 수 있을 것 같습니다.

---

- https://slack.engineering/balancing-old-tricks-with-new-feats-ai-powered-conversion-from-enzyme-to-react-testing-library-at-slack/