34

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 ');

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

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

4

6 に答える 6

7

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

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

当面の間、その動作を提供するヘルパー ライブラリ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`.');
于 2017-07-06T20:17:10.370 に答える