Enzyme

Enzyme を分かりやすく

Enzyme は JavaScript テストランナーの Jest と一緒に使われることが多いです。React のコンポーネントをテストするための便利なツールです。Enzyme はコンポーネントの描画結果を仮想的に生成し、その中にある各要素にアクセスしたり操作したりすることが可能です。

ある意味で、Enzyme を使うことは、ベーキングにおけるオーブンを使うようなものです。オーブンがなければ、パンやケーキを焼くことは難しいですよね。同様に、Enzyme がなければ、React コンポーネントの挙動をテストすることは困難になります。

Enzyme の歴史的変遷

Enzyme は、Facebook の内部で開発され、2015年に初めて公開されました。初期のリリースでは、React のバージョン15に対応していました。その後、React がバージョンアップするたびに、Enzyme もそれに対応してきました。

しかし、2019年には React の公式テストユーティリティーである React Testing Library が登場し、Enzyme の存在が揺らぐこととなります。Enzyme の対するコミュニティの関心が低下し、一部の開発者は React Testing Library を推奨するようになりました。これは React Testing Library が「ユーザーの視点でテストを書く」という哲学を持っており、実際のユーザーエクスペリエンスをより反映したテストを書くことができるからです。

それでも、Enzyme はシャローレンダリングという特徴的な機能を提供しており、未だに多くのプロジェクトで使用されています。

Enzyme と Jamstack の関係

Enzyme と Jamstack の関係は直接的なものではありませんが、Jamstack アーキテクチャを採用するプロジェクトで React を使用している場合、Enzyme がテストツールとして利用されることはよくあります。Jamstack のコンセプトは高速、安全、スケーラブルなウェブアプリ

ケーションを作ることなので、テストツールとしての Enzyme の使用は、アプリケーションの品質を保つために重要です。

Enzyme を使うメリット

シャローレンダリング

Enzyme の一つの大きな特徴は、シャローレンダリング（Shallow Rendering）です。これは、テスト対象のコンポーネントだけをレンダリングし、その子コンポーネントはレンダリングしない方法です。これにより、テストは特定のコンポーネントに焦点を当て、それが予期したとおりに動作するかを独立してチェックできます。

フルレンダリング

一方、フルレンダリング（Full Rendering）も可能で、これはコンポーネントとその子コンポーネントすべてをレンダリングします。これにより、コンポーネント間の相互作用やライフサイクルメソッドの挙動をテストできます。

React Hooks のサポート

Enzyme は React Hooks をサポートしています。そのため、useState や useEffect などの Hooks を使用したコンポーネントもテストできます。

Enzyme を実装

以下に、Next.js と TypeScript で Enzyme を使って簡単なコンポーネントをテストする例を示します。まず、テストしたいコンポーネントを作成します。

type Props = {
  message: string
}

const Greeting = ({ message }: Props) => {
  return <h1>{message}</h1>
}

export default Greeting

次に、Enzyme を使ってこのコンポーネントをテストします。

import { shallow } from 'enzyme'
import Greeting from './Greeting'

describe('<Greeting />', () => {
  it('renders the correct text', () => {
    const wrapper = shallow(<Greeting message="Hello, World!" />)
    expect(wrapper.text()).toEqual("Hello, World!")
  })
})

このコードでは、shallow 関数を使って Greeting コンポーネントをシャローレンダリングしています。その後、expect 関数と toEqual メソッドを使って、コンポーネントが正しいテキストをレンダリングしているかをチェックしています。

Enzyme を学ぶ

以下は Enzyme を学ぶうえで役立つ権威あるサイトのリンクです。