Jest 14.0のSnapshot Testingという新しい機能 #React

Reactコンポーネントのテスト

最近コンポーネントのテストを試していて、とりあえずFBが作っているJestというフレームワークを試していました。一通り理解してテストを完了した、というタイミングでバージョナップされていました。

う～ん日進月歩

概要

必要なものは、Reactコンポーネント、対応するテストプログラム、スナップショットファイルです。

Reactコンポーネントはテスト対象です。説明することもないですね。

そして、今まではテストプログラムで、ごにょごにょと色々していたのですが、スナップショットテストだと基本的にtoMatchSnapshot()を実行していくだけです。

楽だ～

そして、今回の肝となるスナップショットファイルですが、最終的に出力されるHTMLをそのまま記述します。renderメソッドのreturn値を記述していく感じですね。そして、キーとしてSuite(describe)の引数文字列とSpec(it)の引数文字列と連番を連結してexportsに記述します。

スナップショットファイルを作る

もし、テストに対応するスナップショットファイルが無い場合、なんとJestが作ってくれます。テストの進め方としては、

一通りテストプログラムを書く
一度テストを実行してスナップショットファイルを作成
コンポーネントを修正してテスト
テストの失敗を確認して-uオプションでスナップショットファイルを上書きする

みたいな感じなのかしら

単純なサンプル

FBのサンプルでは、子コンポーネントがなかったのでどうなるのか試してみました。きちんと子コンポーネントもレンダリングされた結果がスナップショットの対象になるようです。

Parent.js

import React, {Component} from 'react';

export default class Parent extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <p>Render Parent</p>
        <Child />
      </div>
    );
  }
}

class Child extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <p>Render Child</p>
    );
  }
}

__tests__\Parent-test.js

'use strict';

import React from 'react';
import Parent from '../Parent';
import renderer from 'react/lib/ReactTestRenderer';

describe('Parent', () => {

  it('renders correctly', () => {
    const tree = renderer.create(
      <Parent />
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });

});

__tests__\__snapshots__\Parent-test.js.snap

exports[`Parent renders correctly 1`] = `
<div>
  <p>
    Render Parent
  </p>
  <p>
    Render Child
  </p>
</div>
`;

所感

今まではexpectでだらだらと結果をテストしていた部分をスナップショットファイルに、HTMLでまとめられるのはわかりやすいと思いました。ただ、大きなプロジェクトになると、巨大なスナップショットファイル群ができあがりそうなので、それはそれで見難くなるかもしれませんね。

Facebook製のJavaScriptテストツール「Jest」の逆引き使用例(2016-10-21追記)

chimame氏の記事です。より詳しくJestについて書かれています。
Facebook製のJavaScriptテストツール「Jest」の逆引き使用例