使用酶/玩笑关闭后，retrapstrap模态中的含量仍然存在

Question

我正在尝试用酶和开玩笑的方式进行一些测试，当我打开一个模态例如当我尝试使用

查找模态中的输入字段时，模态状态为false（按预期）

expect(wrapper.find("input")).toHaveLength(0);

并且在我使用]打开模态后确实存在>

const edit = wrapper.find("Button.update-button");
edit.simulate("click");
expect(wrapper.find("input")).toHaveLength(2);
这一切都按预期进行（包括打开后的模式状态变为true）。但是当我关闭模式时，状态会正确关闭，但是当我尝试时，模式内容（例如模式中的输入框和按钮）仍然存在：

expect(wrapper.find("input")).toHaveLength(0);
我仍然以某种方式仍然有2个输入字段，因为模式已关闭。
这是我要测试的组件代码，是否有帮助：

/*
    Artefact Component displays just UI for the Artefact itself and it's information.
*/

import React, { Component } from "react";

import DeleteArtefact from "../DeleteArtefact";
import UpdateArtefact from "../UpdateArtefact";

import {
    Card,
    CardImg,
    CardTitle,
    CardBody,
    ButtonGroup,
    Button,
    CardFooter
} from "reactstrap";

class Artefact extends Component {
    // Initialise State
    state = {
        updatemodal: false,
        deletemodal: false
    };

    // Toggle function for toggling modal open/close
    toggleUpdate = () => {
        this.setState({
            updatemodal: !this.state.updatemodal
        });
    };

    toggleDelete = () => {
        this.setState({
            deletemodal: !this.state.deletemodal
        });
    };

    prepareUpdateState = () => {
        this.props.editUpdate(this.props.artefact);
        this.toggleUpdate();
    };

    render() {
        const {
            artefact,
            onChange,
            onUpdateClick,
            editUpdate,
            onDeleteClick
        } = this.props;
        return (
            <Card>
                <CardImg
                    src={artefact.img}
                    alt={`Image for Artefact ${artefact.name}`}
                />
                <CardBody>
                    <CardTitle>
                        <h6>{artefact.name}</h6>
                    </CardTitle>
                </CardBody>
                <CardFooter>
                    <ButtonGroup>
                        <Button
                            className="update-button"
                            color="dark"
                            onClick={this.prepareUpdateState}
                        >
                            Edit
                        </Button>
                        <Button
                            className="delete-button"
                            color="dark"
                            onClick={this.toggleDelete}
                        >
                            Delete
                        </Button>
                    </ButtonGroup>
                    <UpdateArtefact
                        artefact={artefact}
                        onChange={onChange}
                        onUpdateClick={onUpdateClick}
                        editUpdate={editUpdate}
                        toggle={this.toggleUpdate}
                        modal={this.state.updatemodal}
                    />
                    <DeleteArtefact
                        _id={artefact._id}
                        onDeleteClick={onDeleteClick}
                        toggle={this.toggleDelete}
                        modal={this.state.deletemodal}
                    />
                </CardFooter>
            </Card>
        );
    }
}

export default Artefact;

这是UpdateArtefact组件，它具有我要测试的模式：
/*
    UpdateArtefact Component is a child Component of ArtefactGallery and
    creates a new Artefact by using functions onChange() and updateClick() 
    and editUpdate() which are passed as props from ArtefactGallery and 
    passes state back up and makes api calls using axios.
*/

import React, { Component } from "react";
import {
    Button,
    Modal,
    ModalHeader,
    ModalBody,
    Form,
    FormGroup,
    Label,
    Input
} from "reactstrap";

class UpdateArtefact extends Component {
    // Passes state up to ArtefactGallery component and updates the artefact.
    onSubmit = e => {
        e.preventDefault();
        this.props.onUpdateClick(this.props.artefact._id);
        this.props.toggle();
    };

    // Sets state in ArtefactGallery to the initial values of the artefact
    // to prepare for any edits to be made in the case that some fields have
    // no change, so that there are no null fields.
    prepareUpdateState = () => {
        this.props.editUpdate(this.props.artefact);
        this.props.toggle();
    };

    render() {
        const { artefact } = this.props;
        return (
            <div style={{ marginLeft: "1rem" }}>
                <Modal isOpen={this.props.modal} toggle={this.props.toggle}>
                    <ModalHeader toggle={this.props.toggle}>
                        Edit Artefact
                    </ModalHeader>
                    <ModalBody>
                        <Form onSubmit={this.onSubmit}>
                            <FormGroup>
                                <Label>Artefact</Label>
                                <Input
                                    type="text"
                                    name="name"
                                    id="artefactName"
                                    defaultValue={artefact.name}
                                    onChange={this.props.onChange}
                                />
                                <Label>Image</Label>
                                <Input
                                    type="text"
                                    name="img"
                                    id="artefactImg"
                                    defaultValue={artefact.img}
                                    onChange={this.props.onChange}
                                />
                                <Button
                                    className="modal-submit-button"
                                    color="dark"
                                    style={{ marginTop: "2rem" }}
                                    block
                                >
                                    Submit
                                </Button>
                            </FormGroup>
                        </Form>
                    </ModalBody>
                </Modal>
            </div>
        );
    }
}

export default UpdateArtefact;

所以基本上，我只想知道为什么酶仍然吸收模态含量的原因以及如何解决这个问题。我已经尝试过搜索所有内容，但找不到答案，所以我猜想有一些明显的遗漏。

我正在尝试用酶和开玩笑的方式进行一些测试，当我打开一个模态例如模态中的输入字段不存在，并且当我尝试...时模态状态为假（按预期）...

Answer 1

您可以尝试使用：

wrapper.update()