如何动态设置组件的值并测试它们

Question

我使用

register

创建了一个

react-bootstrap

组件。它在表单中有

email

、

password

和

submit button

字段。最后，它有一个

Alert

组件，该组件最初不应该可见，但在提交表单后应该显示成功/失败

import React from 'react';
import {Col, Row, Container, Card,Button, Alert} from 'react-bootstrap'
import Form from 'react-bootstrap/Form';
import { useState } from 'react';
import User from '../models/user';

let Register = () => {

    let [state,setState] = useState(new User('',''));

    let submitresponse='';
    let alertvariant='';

    let updateInput = (e) =>{
        setState({
                ...state, //state defined above in useState call. Expand the current state and then override the propoerty which target represents
                [e.target.name] : e.target.value
        })
    }

    let register = (e) =>{
        e.preventDefault();
        console.log(`registerclick: ${JSON.stringify(state)}`)

        fetch(process.env.REACT_APP_REGISTER_USER_URL,{
            method: 'POST',
            headers:{
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(state)
            }) //move to separate funcion in separate file to make it easy to test and reuse?
            .then((res) => {
                console.log(`got response: ${JSON.stringify(res)}`);
                return res.json();  //return json from res
            })
            .then((data) => { //data is the json returned previously. Promise chaining
                console.log(`data after register user request: ${JSON.stringify(data)}`);  
                if(data.result == "success") {
                    setState(new User(data.user,data.email)) //override previous value of data object with value of received json object. 
                    this.submitresponse = "User Registered"
                } else {
                    setState(new User('','')) //override previous value of data object with value of received json object. 
                    this.submitresponse = "User Couldn't be Registered"
                }     
            });
    }

    return (
        <>
            <Container className='mt-3'>
                <Row>
                    <Col xs={3}>
                        <Card className="shadow-lg">
                            <Card.Header className='p-3'>
                                 Register
                            </Card.Header>
                            <Card.Body>
                                <Form>
                                    <Form.Group className="mb-3">
                                        <Form.Control name="email" onChange={updateInput} type="text" placeholder="email" aria-label="aria-email" />
                                    </Form.Group>
                                    <Form.Group className="mb-3">    
                                        <Form.Control name="password" onChange={updateInput} type="password" placeholder="password" aria-label="aria-password" />
                                    </Form.Group>                                    
                                    <Form.Group className="mb-3">    
                                        <Button onClick={register} type="submit" name="submit-button" aria-label="aria-submit">Register Button</Button>
                                    </Form.Group>
                                    <Form.Group className="mb-3">    
                                        <Alert name="submit-response-alert" key={this.alertvariant} variant={this.alertvariant} >{this.submitresponse}</Alert>
                                    </Form.Group>
                                </Form>
                            </Card.Body>
                        </Card>
                    </Col>
                </Row>
            </Container>
            
        </>
    )
}

export default Register;

我怎么可以

1. 最初隐藏

   Alert

   ？动态设置的方式是什么

   display:none

   例如
2. 收到服务器响应时使其可见？

在测试中，我想测试

1. Alert

   最初不应出现在文档中

   it('不应显示警报字段', async () => { 使成为（）; Expect(screen.getByName("submit-response-alert")).not.toBeInTheDocument(); //这是正确的方法吗？ });

2. 一旦收到服务器响应（模拟），

   Alert

   应该可以看到正确的消息

   it('应该成功提交表单', async () => { const { getByText } = render();

    await act(async () => {
      fireEvent.click(getByText("Register Button"))
    })  
    expect(screen.getByName("submit-response-alert")).toBeInTheDocument();
   

   //如何测试Alert是否有正确的消息 });

Answer 1

设置跟踪请求进度的状态。您还可以向其中添加消息。

const [requestState , setRequestState] = useState({completed:false , message:""})

将此条件添加到jsx中

{completed && <Alert name="submit-response-alert" key={this.alertvariant} variant={this.alertvariant} >{this.submitresponse}</Alert>}