ReactのJestのテストでエラー Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

背景

Reactアプリ開発のテストをJestで実施しているのだけど、「Consider adding an error boundary to your tree to customize error handling behavior.Visit https://fb.me/react-error-boundaries to learn more about error boundaries.」というエラーに悩まされたので解決方法をまとめておく。

開発言語 (バージョン情報)

React.js (17.0.2)
Next.js (11.1.2)
TypeScript (4.4.3)
Jest (27.2.2)

解決策

「react-test-renderer」ではなく「Testing Library」を使用する。

sample.spec.tsx

import React from 'react';
import App from './App';
import { render } from '@testing-library/react';

describe('test 1', () => {

  it('test case 1', () => {
    const { container } = render(<App />);
    expect(container).toMatchSnapshot();
  });

});

参考