Question

我正在学习反应的酶，但是我正面临这个问题，谁能帮助我。我正在尝试测试更改用户名和密码的注册页面，但是我遇到了这个问题

// RegisterPage.js

   <?php
    $featuredPosts = new WP_Query();
    $featuredPosts->query('showposts=5&cat=3');
    while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
    <h1><a href="<?php the_permalink()
    <div class="meta">
    By <?php the_author() ?>
    </div>
    <div class="storycontent">
    <?php the_excerpt(); ?>
    </div>
    <?php endwhile; ?>

这是我写的测试用例，我是酶的新手，所以对此一无所知 //RegisterPage.test.jsenter image description here

import React from 'react'
import { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../actions';

export class RegisterPage extends Component {
constructor(props) {
    super(props);

    this.state = {
        user: {
            username: '',
            password: ''
        },
        submitted: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
    handleChange(event) {
    const { name, value } = event.target;
    const { user } = this.state;
    this.setState({
        user: {
            ...user,
            [name]: value
        }
    });
}

handleSubmit(event) {
    event.preventDefault();
    // handle button click and dispatch register
    const { user } = this.state;
    if (user.username && user.password) {
        this.props.dispatch(userActions.register(user))
    }else{
     this.setState({submitted:true})   
    }
}

render() {
    const { user, submitted } = this.state;
    const { registering  } = this.props;
    return (
        <div className="col-md-6 col-md-offset-3">
            <h2>Register</h2>
            <form name="form"  onSubmit={this.handleSubmit}>
                <div className={'form-group' + (submitted && !user.username ? ' has-error' : '')}>
                    <label htmlFor="username">Username</label>
                    <input value={user.username} onChange={this.handleChange} type="text" className="form-control username" name="username" />
                    {submitted && !user.username &&
                        <div className="help-block">Username is required</div>
                    }
                </div>
                <div className={'form-group' + (submitted && !user.password ? ' has-error' : '')}>
                    <label htmlFor="password">Password</label>
                    <input value={user.password} onChange={this.handleChange} type="password" className="form-control" name="password"/>
                    {submitted && !user.password &&
                        <div className="help-block">Password is required</div>
                    }
                </div>
                <div className="form-group">
                    <button className="btn btn-primary">Register</button>
                    <Link to="/login" className="btn btn-link">Cancel</Link>
                </div>
            </form>
        </div>
    );
}
}
function mapStateToProps(state) {
return {
    ...state
}
RegisterPage=connect(mapStateToProps)(RegisterPage)
export default RegisterPage;

Answer 1

您可以通过name选择器获取输入，而无需获取子级：

let uname = wrapper.find('input[name="username"]');
let pwd =  wrapper.find('input[name="password"]');

uname.simulate('change',{ target: {value: "demo_username"} });
pwd.simulate('change', { target: { value: "demo_password" } });

方法“模拟”仅旨在在单个节点上运行。找到0个代替

1 个答案: