如何在 React 中测试必需的 props
2017-01-21
6648
我正在尝试使用 React 和 Jest 编写简单的测试。
组件:
import React from "react";
class Task extends React.Component {
render() {
let onDelete = this.props.onDelete;
return (
<li>
<div className="collapsible-header"><i className="material-icons" onClick={() => onDelete(this.props.taskId)}>delete</i>{this.props.title}</div>
<div className="collapsible-body"><p>{this.props.description}</p></div>
</li>
);
}
};
Task.propTypes = {
title: React.PropTypes.string.isRequired,
taskId: React.PropTypes.number.isRequired,
onDelete: React.PropTypes.func.isRequired,
description: React.PropTypes.string
};
Task.defaultProps = {
description: ''
};
export default Task;
测试
import React from 'react';
import Task from '../src/components/Task';
import renderer from 'react-test-renderer';
test('Task should require properties', () => {
const component = renderer.create( //this will give me React warnings which I would like to assert
<Task></Task>
);
});
现在我想断言
Task
组件需要
title
、
taskId
和
onDelete
。这样我会收到关于未指定它们(或传递不同类型)的 React 警告。
1个回答
您可以使用间谍来查明 React 是否抛出了任何类型的异常。许多人使用一个名为 Sinon.js 的库。来自文档“测试间谍是一个函数,它记录所有调用的参数、返回值、this 的值和抛出的异常(如果有)。”
这里有一个很棒的解决方案,更详细地描述了它:
Special Character
2017-01-21