Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

う~ん日進月歩:cherry_blossom:

概要

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

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

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

楽だ~:cherry_blossom:

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

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

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

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

みたいな感じなのかしら:cherry_blossom:

単純なサンプル

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」の逆引き使用例

teufelj
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした