Reactjs 酶-访问表单输入，以验证安装值是否反映道具

使用Ezyme和Jest，如果我想让道具设置具有1个或多个输入的组件的默认输入值，我如何访问输入以验证其文本值

使用下面的示例，没有找到任何节点，我得到了错误

方法“text”将在1个节点上运行。改为找到0。

注册组件：

import React, { Component } from "react";
import { Form, Row } from "react-bootstrap";

class Register extends Component {
    constructor() {
    super();

    this.state = {
        username: "",
        password: ""
    };
    }

    componentDidMount() {
    this.setState({
        username: this.props.username,
        password: this.props.password
    })
    }

    onChange = (event) => {
    this.setState({
        [event.target.id]: event.target.value
    })
    }

    render() {
    var registerInformation = []
    const registerValueItems = []
    const registerLabelItems = []

    registerLabelItems.push(<div key={"username"} className="labelitem"><Form.Label>Username:</Form.Label></div>)
    registerLabelItems.push(<div key={"password"} className="labelitem"><Form.Label>Password:</Form.Label></div>)

    registerValueItems.push(<Row key={"username"}><Form.Control id="username" value={this.state.username} disabled={!this.state.edit} onChange={this.onChange}/></Row>)
    registerValueItems.push(<Row key={"password"}><Form.Control id="password" value={this.state.password} disabled={!this.state.edit} onChange={this.onChange}/></Row>)


    registerInformation = (
        <div id="registerinfoarea" className="registerinfoarea">
        <div id="registerlabelarea" className="labelarea">{registerLabelItems}</div>
        <div id="registervaluearea" className="valuearea">{registerValueItems}</div>
        </div>
    )

    return (
        <div id="registerarea" className="registerarea">
        {registerInformation}
        </div>
    );
    }
}
export default Register;

import React，{Component}来自“React”；
从“react bootstrap”导入{Form，Row}；
类寄存器扩展组件{
构造函数（）{
超级（）；
此.state={
用户名：“”，
密码：“
};
}
componentDidMount（）{
这是我的国家({
用户名：this.props.username，
密码：this.props.password
})
}
onChange=（事件）=>{
这是我的国家({
[event.target.id]：event.target.value
})
}
render（）{
var registerInformation=[]
常量registerValueItems=[]
常量寄存器标记=[]
registerLabelItems.push（用户名：）
registerLabelItems.push（密码：）
registerValueItems.push（）
registerValueItems.push（）
注册信息=(
{registerLabelItems}
{registerValueItems}
)
返回(
{注册信息}
);
}
}
导出默认寄存器；

测试

it("renders with username", () => {
const props = {username: "Santa Clause", password: "presents"}
const RegisterComponent = mount(<Register {...props}/>);

expect(RegisterComponent.find('username').text()).toEqual('Santa Clause')
});

it（“使用用户名呈现”，（）=>{
const props={username:“Santa子句”，密码：“presents”}
常量RegisterComponent=mount（）；
expect（RegisterComponent.find（'username'）.text（））.toEqual（'Santa子句'））
});

您应该使用Enzyme的.find（）方法来查看

组件（我假设

行

组件在此组件中只呈现一次）

---

这将允许您查找与该组件匹配的节点。

\username

应该在那里，并且应该在

.value（）

处。如果我使用#username而不是username，它将查找2个节点而不是0（如问题中所述）。出于某种原因，它似乎在两次查找同一个节点？如果有多行呢？我可以通过他们的id或钥匙来识别他们吗？@simernes是的，有多种方法可以识别。你介意发布你的完整代码，这样我就可以给你合适的方法了吗？我已经用完整的代码更新了问题文本component@simernes在这种情况下，由于只有2个

组件，您可以尝试使用

RegisterComponent.find（Row）.first（）

，它应该返回第一个节点，这是一个带有username的，谢谢，它让我更进一步，但是对text（）的调用接收到一个空字符串，因此测试失败，因为它没有得到预期的“Santa子句”，而是接收“”。

expect(RegisterComponent.find(Row).text()).toEqual('Santa Clause')