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

问题描述

我正在为我的 React 代码编写 Jest 测试，并希望使用/测试 PropType 检查.我对 Javascript 世界很陌生.我正在使用 npm 安装 react-0.11.2 并有一个简单的:

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

在我的测试中.我的测试看起来与 jest/react 教程示例非常相似，代码如下:

var eventCell = TestUtils.renderIntoDocument(<事件单元插槽={插槽}周 ID={周 ID}天={天}事件类型={事件类型}/>);var time = TestUtils.findRenderedDOMComponentWithClass(eventCell, 'time');期望(time.getDOMNode().textContent).toEqual('19:00');

但是，EventCell 组件中的 PropType 检查似乎没有被触发.我知道检查只在开发模式下运行，但后来我还认为通过 npm 获取 react 给了你开发版本.当我使用 watchify 构建组件时，检查会在我的浏览器中触发.

我错过了什么?

解决方案

根本问题是如何测试console.log?

简短的回答是，您应该在测试期间更换 console.{method}.常见的方法是使用 spies.在这种特殊情况下，您可能希望使用 stubs 来防止输出.>

以下是使用 Sinon.js(Sinon.js 提供独立的间谍、存根和模拟)的示例实现:

import {预计} 来自'柴';从./../../src/app/components/DateName"导入日期名称；从 './create-component' 导入 createComponent；从 'sinon' 导入 sinon；描述('日期名称'，()=> {it('如果日期输入不代表 UTC 时间 12:00:00，则抛出错误', () => {让存根；stub = sinon.stub(控制台，'错误');创建组件(日期名称，{日期:1470009600000})；期望(存根.调用一次).to.equal(真)；expect(stub.CalledWithExactly('警告:失败 propType:日期 unix 时间戳必须代表 00:00:00 (HH:mm:ss) 时间.')).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屋！