如何通过Jest测试React PropTypes? [英] How to test React PropTypes through Jest?

问题描述

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

我想念什么?

解决方案

基本问题是如何进行测试console.log?

简短的答案是，您应在测试期间替换console.{method}.常见的方法是使用间谍.在这种情况下，您可能想使用 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模块在内部使用的生成错误的方法).我确保该存根已被调用一次，并且正好用一个参数表示错误.

I'm writing Jest tests for my React code and hoping to make use of/test the PropType checks. I am quite new to the Javascript universe. I'm using npm to install react-0.11.2 and have a simple:

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

In my tests. My test looks quite similar to the jest/react tutorial example with code like:

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

However it seems that the PropType checks in the EventCell component aren't being triggered. I understand that the checks are only run in Development mode but then I also thought that getting react through npm gave you the development version. The checks trigger in my browser when I build the component with watchify.

What am I missing?

解决方案

The underlying problem is How to test console.log?

The short answer is that you should replace the console.{method} for the duration of the test. The common approach is to use spies. In this particular case, you might want to use stubs to prevent the output.

Here is an example implementation using Sinon.js (Sinon.js provides standalone spies, stubs and mocks):

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();
    });
});

In this example DataName component will throw an error when initialised with a timestamp value that does not represent a precise date (12:00:00 AM).

I am stubbing the console.error method (This is what Facebook warning module is using internally to generate the error). I ensure that the stub has been called once and with exactly one parameter representing the error.

这篇关于如何通过Jest测试React PropTypes?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！