时间戳

首页 > 解决方案 > 方法“props”仅用于在单个节点上运行。0 在 SingleDatePicker 中找到

reactjs - 方法“props”仅用于在单个节点上运行。0 在 SingleDatePicker 中找到

问题描述

我正在尝试使用酶测试该方法，但出现此错误。

  ● should set calender to focused

    Method “props” is only meant to be run on a single node. 0 found instead.

      86 |     const focused = true;
      87 |     const wrapper = shallow(<ExpenseForm expense={expenses[0]} />);
    > 88 |     wrapper.find('SingleDatePicker').prop('onFocusChange')({ focused });
         |                                      ^
      89 |     expect(wrapper.state('calenderFocused')).toBe(focused);
      90 | });

我正在尝试测试其方法的组件文件。我正在尝试测试 SingleDatePicker 的方法

import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/initialize';


export default class ExpenseForm extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            description: props.expense ? props.expense.description : "",
            note: props.expense ? props.expense.note : "",
            amount: props.expense ? (props.expense.amount / 100).toString() : "",
            createdAt: props.expense ? moment(props.expense.createdAt) : moment(),
            calenderFocused: false,
            error: ""
        };
    }

    onDescriptionChange = (e) => {
        const description = e.target.value;
        this.setState(() => ({ description }));
    }

    onNoteChange = (e) => {
        const note = e.target.value;
        this.setState(() => ({ note }));
    }

    onAmountChange = (e) => {
        const amount = e.target.value;
        if (!amount || amount.match(/^\d{1,}(\.\d{0,2})?$/)) {
            this.setState(() => ({ amount }))
        }
    }

    onDateChange = (createdAt) => {
        if (createdAt)
            this.setState(() => ({ createdAt }));
    };

    onFocusChange = ({ focused }) => {
        this.setState(() => ({ focused }));
    };

    onSubmit = (e) => {
        e.preventDefault();

        if (!this.state.description || !this.state.amount) {
            //Error
            this.setState(() => ({ error: "Please provide description and amount" }));
        } else {
            //Clear error
            this.setState(() => ({ error: "" }));
            this.props.onSubmit({
                description: this.state.description,
                amount: parseFloat(this.state.amount, 10) * 100,
                createdAt: this.state.createdAt.valueOf(),
                note: this.state.note
            });
        }
    };

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input
                        type="text"
                        placeholder="Description"
                        autoFocus
                        value={this.state.description}
                        onChange={this.onDescriptionChange} />
                    <input
                        type="text"
                        placeholder="amount"
                        value={this.state.amount}
                        onChange={this.onAmountChange} />
                    <SingleDatePicker
                        date={this.state.createdAt}
                        onDateChange={this.onDateChange}
                        focused={this.state.focused}
                        onFocusChange={this.onFocusChange}
                        numberOfMonths={1}
                        isOutsideRange={(day) => false}
                    />
                    <textarea
                        placeholder="Add note for your expense"
                        value={this.state.note}
                        onChange={this.onNoteChange}
                    ></textarea>
                    {!!this.state.error && <p>{this.state.error}</p>}
                    <button>Add expense</button>
                </form>
            </div>
        )
    }
}

这些是我遇到错误的 2 个测试用例。两个测试用例都有相同的错误。它无法找到 SingleDatePicker。

test("should set date change", () => {
    const now = moment();
    const wrapper = shallow(<ExpenseForm />);
    wrapper.find('SingleDatePicker').prop('onDateChange')(now);
    expect(wrapper.state('createdAt')).toEqual(now);
});

test("should set calender to focused", () => {
    const focused = true;
    const wrapper = shallow(<ExpenseForm />);
    wrapper.find('SingleDatePicker').prop('onFocusChange')({ focused });
    expect(wrapper.state('calenderFocused')).toBe(focused);
});

标签： reactjsjestjsenzyme

解决方案

需要提供该组件而不是提供给find. 在 JSX 中如何命名组件name和属性是不必要的。displayName否则 Enzyme 无法将组件连接到其预期名称。

文档提到了这一点：

React 组件名称和道具（Button、Button[type="submit"] 等） - 但是，请注意，强烈建议通过组件构造函数/函数而不是显示名称来查找。

它应该是：

wrapper.find(SingleDatePicker).prop('onFocusChange')({ focused });

推荐阅读