Enzyme は、Reactコンポーネントの出力を検証・操作・走査するためのJavaScriptテストユーティリティです。
Jest および React 16 でのセットアップ
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
レンダリングモード（Rendering Modes）
浅いレンダリング（shallow）
子コンポーネントを再帰的にレンダリングせず、現在のコンポーネントのみを1階層深くレンダリングします：
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
完全なDOMマウント（mount）
jsdom環境にすべての子コンポーネントを含めて完全なDOMツリーとしてレンダリングします：
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
DOM走査とセレクター（DOM Traversal & Finders）
wrapper.find('button') // CSSセレクターまたはコンポーネント型で検索
wrapper.filter('.active') // 現在の選択要素をフィルタリング
wrapper.not('.hidden') // 逆条件でフィルタリング
wrapper.children() // 子ノードを取得
wrapper.parent() // 直接の親要素を取得
wrapper.closest('form') // 最も近い祖先要素を検索
wrapper.first() // 最初の一致ノード
wrapper.last() // 最後の一致ノード
wrapper.at(0) // n番目の一致ノード
イベントのシミュレーション（Simulating Events）
// クリックイベントのシミュレーション
wrapper.find('button').simulate('click');
// モックイベント引数を伴うchangeイベント
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// キー押下イベント
wrapper.find('input').simulate('keydown', { keyCode: 13 });
State、Props、および Context の検証
// Read values
wrapper.state('loading'); // stateのキー値を取得
wrapper.prop('disabled'); // propの値を取得
wrapper.props(); // propsオブジェクト全体を取得
// Mutate values in tests
wrapper.setState({ count: 5 }); // テスト中にstateを更新
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // 基底のReactインスタンスにアクセス
アサーションと要素検証（Assertions & Element Checks）
expect(wrapper.exists()).toBe(true);
expect(wrapper.hasClass('btn-primary')).toBe(true);
expect(wrapper.contains(<span className="badge">New</span>)).toBe(true);
expect(wrapper.text()).toContain('Welcome');
expect(wrapper.html()).toContain('class="active"');