如何通过Jest测试React PropTypes？

Question

我正在为我的React代码编写Jest测试，并希望使用/测试PropType检查。我对Javascript领域很陌生。我正在使用npm进行安装react-0.11.2并有一个简单的方法：

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

在我的测试中。我的测试看起来很像玩笑/反应教程示例，其代码如下：

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检查。我知道检查仅在开发模式下运行，但是我还认为react通过npm获得了开发版本。当我使用watchify构建组件时，检查会在浏览器中触发。

我想念什么？

Answer 1

潜在的问题是如何测试console.log？

简短的答案是您应console.{method}在测试期间更换。常用的方法是使用间谍。在这种情况下，您可能想使用存根阻止输出。

这是使用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模块内部使用的生成错误的方法）。我确保已调用存根一次，并且仅使用一个代表错误的参数。