如何在React中測試所需的道具

Question

我正在嘗試使用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> 
); 
}); 

現在我想斷言title，taskId和onDelete需要Task組件。我會得到有關不指定它們（或傳遞不同類型）的React警告。

Answer 1

您可以使用間諜來查明是否有任何異常是從反應中拋出的。許多人使用名爲Sinon.js的圖書館。從文檔「測試間諜是一個函數，它記錄參數，返回值，這個值和所有調用拋出的異常（如果有的話）」。

有一個在這裏更詳細地描述一個很好的解決方案：

How to test React PropTypes through Jest?