如何在React中编写用于测试的单元测试用例

时间:2019-01-31 04:26:07

标签: reactjs unit-testing react-redux jestjs react-testing-library

我有一个组件,该组件的输入框类似于->

class search extends React.Component {

    constructor(props) {
        super(props);
        this.staate = {
            search : ''
        }
    }

     onInputChnage = (e) => {
        this.setState({ search: e.target.value });
     }

    render() {

        const { jobs: { content } } = this.props;
        const { search } = this.state;
        const filteredList = content.filter(job => (job.jdName && job.jdName.toLowerCase().includes(search.toLowerCase())) || (job.technology && job.technology.toLowerCase().includes(search.toLowerCase())));

        return (
            <input type="text"
                id="searchJob"
                className="form-control-sm border-0 flex-grow-1"
                value={this.state.search}
                placeholder="Technology / Job title"
                onChange={this.onInputChnage}
            />
            <i className="fa fa-search search-job"></i>
        )
    }
}

在此组件中,现在我有来自reducer的作业数据。

this.props.jobs = this.props.jobs = {
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "companyId": null,
        "jdName": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": "java"
    },{
        "id": "5b7d4a566c5fd005075011",
        "companyId": null,
        "jdName": "ead UI Developer",
        "jobDescription": null,
        "technology": "angular"
    }]
}

现在,在这里,我想使用单元测试用例来测试该组件的搜索功能。我正在使用jest。现在,有人可以帮我吗?任何提示将非常有帮助。谢谢。

0 个答案:

没有答案