React.jsのコンポーネントのテスト！

今回テストをするにあたってenzymeを導入しました。
(エンザイムってカタカナで書くと健康食品みたい。。)

github.com

実際の実装の仕方は下記の記事が参考になりました。
labotech.dmm.com
(DMMさん！こんなところでもお世話になるなんて！）

今回の記述したコードはこちらです。

//react.component.test.js
import React from 'react';
import testCommon from './testCommon';
import mocha from 'mocha';
import sinon from 'sinon';
import assert from 'power-assert';
import mochaSinon from 'mocha-sinon';
import { shallow, mount } from 'enzyme';
import EmailInput from '../testTarget/EmailInput';

describe('EmailInputのテスト', () => {
  it('propが渡されたときにvalueにセットされること', () => {
    const wrapper = shallow(<EmailInput />);
    // ここでpropsをセットする
    wrapper.setProps({ 'value': 'kinachan0725@example.com' });

    const input = wrapper.find('input');
    assert.deepEqual(input.node.props.value,'kinachan0725@example.com');
  });
  
  it('メールアドレスが入力されたときにonChangeイベントが発火すること', () => {
    // onChangeメソッドが呼ばれたときの入出力（引数の値や戻り値、呼ばれた回数など）を監視する
    const onChange = sinon.spy();
    // テスト対象のコンポーネントのみをレンダリング
    const wrapper = shallow(<EmailInput onChange={onChange} />);

    // 入力イベントを擬似的に再現
    wrapper.find('input').simulate(
      'change', {
        target: {value: 'x'}
      }
    );
    // onChangeメソッドが1回呼ばれているかを確認
    assert(onChange.calledOnce === true);
  });
});

//テスト対象ファイル EmailInput.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class EmailInput extends Component {
  render() {
    return (
      <div>
        <input
          type="text"
          name="email"
          ref={(email) => { this.textInput = email; }}
          placeholder="メールアドレス"
          value={this.props.value}
          onChange={this.props.onChange}
        />
      </div>
    );
  }
}

//propTypesで型と初期値を宣言
EmailInput.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
};

EmailInput.defaultProps = {
  value: undefined,
  onChange: undefined,
};
export default EmailInput;

とまあ、ほぼコピペです。
ただ、実際に変更したのはこちら。

今のプロジェクトではeslintを導入して、ルールにprop-typesが指定されていない場合エラーになるので
ESLint 最初の一歩 - Qiita
ESLintの導入と警告対応のメモ - Qiita
(公式よりこちらのが分かり易いのでQittaの記事を)

EmailInputにthis.props.valueと指定したら怒られます。
(eslintのルールを変更すればいいんですけど、それは入れた意味がないｗ)

これはテスト対象の2行目にimportしている
PropTypesで解決します。
要はpropsの中に好き勝手にプロパティを使うのではなく、ちゃんと宣言しろってことですね。

また、テストコードですが、参考URLとは異なりassertにpower-assertを使用しているので組み替えました。
propsの値はinput.node.props.valueで取れるみたいですね。

ちなみにテスト実行時コンソール上で

Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.

が表示されましたが、これで解決できそうです。
Support react-dom/test-utils · Issue #875 · airbnb/enzyme · GitHub

とりあえずテストは通るので、来週辺りにこれ解決しようかな。。。