React 18 Enzyme → RTL 移行

Enzyme には React 18 アダプタがなく、React 18 をサポートするパスはありません。すべての Enzyme テストは React Testing Library を使用して書き直す必要があります。

哲学的シフト（まずこれを読んでください）

Enzyme は実装をテストします。RTL は動作をテストします。

// Enzyme: コンポーネントが正しい内部状態を持つことをテストする
expect(wrapper.state('count')).toBe(3);
expect(wrapper.instance().handleClick).toBeDefined();
expect(wrapper.find('Button').prop('disabled')).toBe(true);

// RTL: ユーザーが実際に見えて行える動作をテストする
expect(screen.getByText('Count: 3')).toBeInTheDocument();
expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();

これは 1:1 翻訳ではありません。内部状態またはインスタンスメソッドを検証する Enzyme テストには RTL の同等物がありません。RTL は意図的に内部を公開していないからです。代わりに、目に見える結果を確認するようにテストを書き直してください。

API マップ

各 Enzyme API の完全な前後のコードについては、以下を参照してください:

• references/enzyme-api-map.md - 完全なマッピング: shallow、mount、find、simulate、prop、state、instance、configure
• references/async-patterns.md - waitFor、findBy、act()、Apollo MockedProvider、ローディング状態、エラー状態

コア書き直しテンプレート

// すべての Enzyme テストはこの形に書き直されます:
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('does the thing', async () => {
    // 1. レンダリング (shallow/mount を置き換え)
    render(<MyComponent prop="value" />);

    // 2. クエリ (wrapper.find() を置き換え)
    const button = screen.getByRole('button', { name: /submit/i });

    // 3. インタラクション (simulate() を置き換え)
    await userEvent.setup().click(button);

    // 4. 目に見える出力を断定 (wrapper.state() / wrapper.prop() を置き換え)
    expect(screen.getByText('Submitted!')).toBeInTheDocument();
  });
});

RTL クエリの優先度（この順序で使用）

1. getByRole - アクセシブルロール（button、textbox、heading、checkbox など）と照合
2. getByLabelText - ラベルにリンクされたフォームフィールド
3. getByPlaceholderText - 入力プレースホルダ
4. getByText - 表示されているテキストコンテンツ
5. getByDisplayValue - input/select/textarea の現在の値
6. getByAltText - 画像の alt テキスト
7. getByTitle - title 属性
8. getByTestId - data-testid 属性（最後の手段）

getByTestId より getByRole を優先してください。アクセシビリティもテストします。

プロバイダーでのラップ

// コンテキスト付き Enzyme:
const wrapper = mount(
  <ApolloProvider client={client}>
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  </ApolloProvider>
);

// RTL 同等物（プロジェクトの customRender を使用するかインラインで ラップ）:
import { render } from '@testing-library/react';
render(
  <MockedProvider mocks={mocks} addTypename={false}>
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  </MockedProvider>
);
// またはプロバイダーをラップするプロジェクトの customRender ヘルパーを使用します