加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

单元测试 – 如何在React中测试所需的道具

发布时间:2020-12-15 20:30:08 所属栏目:百科 来源:网络整理
导读:我正在尝试用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=
我正在尝试用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.我将得到React警告,不指定它们(或传递不同的类型).

解决方法

您可以使用间谍来查明是否从反应中抛出了任何类型的异常.许多人使用名为Sinon.js的库.从文档“测试间谍是一个记录参数,返回值,此值和抛出异常(如果有)的函数的函数”.

这里有一个很好的解决方案:

How to test React PropTypes through Jest?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读