Enzymeという講座を聴講した内容をまとめたものです。自身のメモと、同じ初心者の方のJest導入のつかみになればと思いまとめました。著者もプログラミング自体始めて2ヶ月程度の初心者のため、間違いや不適切な表現などがありましたらぜひぜひコメント欄にてお知らせください。Enzyme導入Enzyme概要について、以下、Enzyme公式docより引用。(create-react-app)にはEnzymeがないので別途インストールが必要。必要なパッケージをインストール。enzyme-adapter-react-16※enzyme-adapter-react-[version]とするパッケージをインポートインストールしたパッケージをインポートし、Enzymeインスタンスのconfigureメソッドを用いて設定を行う。テストを実行するファイルのファイル名は、[テスト対象コンポーネント名].test.jsとする。'react-dom'は不要なので削除する。expect(wrapper).toBeTruthy();});shallow()引数に渡したコンポーネントのみテストを行う。コンポーネント内の子コンポーネントはプレースホルダーとして扱われて実際にはレンダーされないため、子コンポーネントを干渉させずに純粋に単一コンポーネントをテストできる。shallowは「浅い」の意。wrapperEnzymeに標準搭載されているAPIで、レンダーされたコンポーネントを格納することで、多くのメソッドを使うことができる。ShallowWrapperインスタンスのメソッドの一つであるdebug()は、レンダーしたコンポーネントをHTMLライクなStringとして返す。上記の例のようにAppコンポーネントを格納した状態でconsole.log(wrapper.debug());とすると、以下のような結果がString(文字列)として返ってくる。expect()Jestの標準搭載メソッドで、テストしたいコンポーネントの様々な値をテストすることができる。上記例のtoBeTruthy()ではコンポーネントの値には興味がなく、trueを返すかどうかをテストする。undefined,NaNがfalse値として扱われるので、それ以外であればテストが通ることになる。いったメソッドを使い分けながら様々な値をテストしていく流れ。各メソッドの詳細は公式docのExpectを参照。さいごにまだUdemyの動画を見終わっていないので、全て見たら改めて追加情報をまとめようと思います。upLoginユーザーは見つかりませんでした。