web-dev-qa-db-ja.com

テストする方法React Jestを介したPropTypes？

私はReactコードのJestテストを書いており、PropTypeチェックを利用/テストしたいと思っています。私はJavascriptの世界にはまったく慣れていません。npmを使ってreact-0.11.2とシンプルな

var React = require('react/addons');

私のテストでは。私のテストは、jest/reactチュートリアルの例と非常によく似ていますが、次のようなコードがあります。

var eventCell = TestUtils.renderIntoDocument(
  <EventCell
    slot={slot}
    weekId={weekId}
    day={day}
    eventTypes={eventTypes}
    />
);

var time = TestUtils.findRenderedDOMComponentWithClass(eventCell, 'time');
expect(time.getDOMNode().textContent).toEqual('19:00 ');

ただし、EventCellコンポーネントのPropTypeチェックはトリガーされていないようです。チェックは開発モードでのみ実行されることを理解していますが、npmでreactを取得すると開発バージョンが得られると考えました。 watchifyでコンポーネントをビルドすると、ブラウザーでチェックがトリガーされます。

私は何が欠けていますか？

reactjsjestjsreactjs-testutilsreact-proptypes
27
MichaelJones

根本的な問題は console.log？のテスト方法 です。

簡単な答えは、テスト中にconsole.{method}を置き換える必要があるということです。一般的なアプローチは、 spies を使用することです。この特定のケースでは、出力を防ぐために stubs を使用できます。

Sinon.js を使用した実装例を次に示します（Sinon.jsはスタンドアロンのスパイ、スタブ、およびモックを提供します）。

import {
    expect
} from 'chai';
import DateName from './../../src/app/components/DateName';
import createComponent from './create-component';
import sinon from 'sinon';

describe('DateName', () => {
    it('throws an error if date input does not represent 12:00:00 AM UTC', () => {
        let stub;

        stub = sinon.stub(console, 'error');

        createComponent(DateName, {date: 1470009600000});

        expect(stub.calledOnce).to.equal(true);
        expect(stub.calledWithExactly('Warning: Failed propType: Date unix timestamp must represent 00:00:00 (HH:mm:ss) time.')).to.equal(true);

        console.error.restore();
    });
});

この例では、DataNameコンポーネントは、正確な日付（12:00:00 AM）を表さないタイムスタンプ値で初期化されたときにエラーをスローします。

console.errorメソッドをスタブしています（これは、Facebook warningモジュールがエラーを生成するために内部的に使用しているものです）。スタブが1回呼び出され、エラーを表すパラメーターが1つだけであることを確認します。

33
Gajus

モッキングconsole.errorは単体テストでの使用には適していません！ @AndrewWillemsは、このアプローチの問題を説明する上記のコメントの another SO question にリンクされています。

facebook/prop-typesのこの問題 propTypeエラーをログに記録する代わりにそのライブラリがスローする機能についての説明を確認してください（執筆時点ではサポートされていません）。

その間に check-prop-types の動作を提供するヘルパーライブラリを公開しました。次のように使用できます。

import PropTypes from 'prop-types';
import checkPropTypes from 'check-prop-types';

const HelloComponent = ({ name }) => (
  <h1>Hi, {name}</h1>
);

HelloComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

let result = checkPropTypes(HelloComponent.propTypes, { name: 'Julia' }, 'prop', HelloComponent.name);
assert(`result` === null);

result = checkPropTypes(HelloComponent.propTypes, { name: 123 }, 'prop', HelloComponent.name);
assert(`result` === 'Failed prop type: Invalid prop `name` of type `number` supplied to `HelloComponent`, expected `string`.');
5
Phil

新しいパッケージ jest-prop-type-error は簡単に追加でき、PropTypeエラーで失敗します。

経由でインストール：

yarn add -D jest-prop-type-error

次に、package.jsonのsetupFilesセクションのjestセクションに以下を追加します。

"setupFiles": [
  "jest-prop-type-error"
]
3
YPCrumble

ReactJSはコンソールに警告のみを送信しますが、実際にはエラーをスローしないため、次の方法でprop値をテストします。

var myTestElement = TestUtils.renderIntoDocument(
<MyTestElement height={100} /> );

it("check MyTestElement props", function() {

   expect( typeof myTestElement.props.height ).toEqual ( 'number' );

});
1
Guy Laor