ReactでのJest + Enzyme導入

はじめに

本記事は、Udemyの2019 Update! React Testing with Jest and Enzymeという講座を聴講した内容をまとめたものです。自身のメモと、同じ初心者の方のJest導入のつかみになればと思いまとめました。

著者もプログラミング自体始めて2ヶ月程度の初心者のため、間違いや不適切な表現などがありましたらぜひぜひコメント欄にてお知らせください。

Enzyme導入

Enzyme概要について、以下、Enzyme公式docより引用。

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Enzymeをセットアップ

CRA (create-react-app)にはEnzymeがないので別途インストールが必要。

必要なパッケージをインストール。

npm install --save-dev enzyme jest-enzyme enzyme-adapter-react-16

※enzyme-adapter-react-[version]とする

パッケージをインポート

インストールしたパッケージをインポートし、Enzymeインスタンスのconfigureメソッドを用いて設定を行う。

テストを実行するファイルのファイル名は、[テスト対象コンポーネント名].test.jsとする。
import ReactDOM from 'react-dom'は不要なので削除する。

App.test.js

import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-[version]';

Enzyme.configure( { adapter: new EnzymeAdapter() });

実際にテストする

テストするコンポーネント

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h1>Hello World</h1>
            </div>
        );
    }
}

export default App;

テストを実行するファイル

App.test.js

test('renders without crashing', () => {
    const wrapper = shallow(<App />);
    expect(wrapper).toBeTruthy();
});

shallow()

引数に渡したコンポーネントのみテストを行う。コンポーネント内の子コンポーネントはプレースホルダーとして扱われて実際にはレンダーされないため、子コンポーネントを干渉させずに純粋に単一コンポーネントをテストできる。shallowは「浅い」の意。

wrapper

Enzymeに標準搭載されているAPIで、レンダーされたコンポーネントを格納することで、多くのメソッドを使うことができる。
例えば、ShallowWrapperインスタンスのメソッドの一つであるdebug()は、レンダーしたコンポーネントをHTMLライクなStringとして返す。上記の例のようにAppコンポーネントを格納した状態でconsole.log(wrapper.debug());とすると、以下のような結果がString（文字列）として返ってくる。

<div className="App">
    <h1>
        Hello World
    </h1>
</div>

各メソッドについて、詳しくは公式docのShallow Rendering APIを参照。

expect()

Jestの標準搭載メソッドで、テストしたいコンポーネントの様々な値をテストすることができる。例えば、上記例のtoBeTruthy()ではコンポーネントの値には興味がなく、trueを返すかどうかをテストする。JavaScriptでは、false, 0, '', null, undefined,NaNがfalse値として扱われるので、それ以外であればテストが通ることになる。

こういったメソッドを使い分けながら様々な値をテストしていく流れ。
各メソッドの詳細は公式docのExpectを参照。

さいごに

まだUdemyの動画を見終わっていないので、全て見たら改めて追加情報をまとめようと思います。