Javascript 无法刺激模式中输入的更改：React Redux

我有一个react-redux应用程序，其中有一个组件呈现一个按钮，单击该按钮可打开一个模式

组件：

class ModalComp extends Component {
  state = {
    title: '',
    visible: false,
  };
  onChange = e => {
    this.setState({ title: e.target.value });
  };
  showModal = () => {
    this.setState({ visible: true });
  };
  render() {
    const { title } = this.state;
    return (
      <div>
        <Button type="primary" onClick={this.showModal} />
        <Modal
          visible={this.state.visible}
          onOk={this.handleOk}
          style={{ top: 53 }}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
          footer={null}
        >
          <Input
            placeholder="Title"
            autosize
            value={title}
            onChange={this.onChange}
          />
        </Modal>
      </div>
    );
  }
}

export default ModalComp;

it('allows user to enter text in Title input when the modal is open', () => {
  component = mount(<ModalComp />);
  const button = component.find(Button);
  button.simulate('click');
  component.update();
  const title = 'newtitle';
  const TitleInput = component.find(Input);
  TitleInput.simulate('change', { target: { value: title } });
  component.update();
  expect(TitleInput.props().value).toEqual(title);
});

it('allows user to enter text in Title input when the modal is open', () => {
component = mount(<ModalComp />)
const button = component.find(Button)
button.simulate('click')
component.update()
const title = "newtitle"
const TitleInput = component.find(Input)
TitleInput.simulate('change', {target: {value: title}})
component.update()
//change in below expect statement in finding the input rather than using the 
//previous one will do the trick
expect(component.find(Input).props().value).toEqual(title)
})

class ModalComp扩展组件{
状态={
标题：“”，
可见：假，
};
onChange=e=>{
this.setState（{title:e.target.value}）；
};
showModal=（）=>{
this.setState（{visible:true}）；
};
render（）{
const{title}=this.state；
返回(
);
}
}
导出默认ModalComp；

测试用例：

class ModalComp extends Component {
  state = {
    title: '',
    visible: false,
  };
  onChange = e => {
    this.setState({ title: e.target.value });
  };
  showModal = () => {
    this.setState({ visible: true });
  };
  render() {
    const { title } = this.state;
    return (
      <div>
        <Button type="primary" onClick={this.showModal} />
        <Modal
          visible={this.state.visible}
          onOk={this.handleOk}
          style={{ top: 53 }}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
          footer={null}
        >
          <Input
            placeholder="Title"
            autosize
            value={title}
            onChange={this.onChange}
          />
        </Modal>
      </div>
    );
  }
}

export default ModalComp;

it('allows user to enter text in Title input when the modal is open', () => {
  component = mount(<ModalComp />);
  const button = component.find(Button);
  button.simulate('click');
  component.update();
  const title = 'newtitle';
  const TitleInput = component.find(Input);
  TitleInput.simulate('change', { target: { value: title } });
  component.update();
  expect(TitleInput.props().value).toEqual(title);
});

it('allows user to enter text in Title input when the modal is open', () => {
component = mount(<ModalComp />)
const button = component.find(Button)
button.simulate('click')
component.update()
const title = "newtitle"
const TitleInput = component.find(Input)
TitleInput.simulate('change', {target: {value: title}})
component.update()
//change in below expect statement in finding the input rather than using the 
//previous one will do the trick
expect(component.find(Input).props().value).toEqual(title)
})

it（'当模式打开时，允许用户在标题输入中输入文本'，（）=>{
组件=安装（）；
const button=component.find（按钮）；
按钮。模拟（'click'）；
component.update（）；
常量标题='newtitle'；
常量TitleInput=组件。查找（输入）；
模拟（'change'，{target:{value:title}}）；
component.update（）；
expect（TitleInput.props（）.value）.toEqual（title）；
});

我能够正确地找到节点，但该值仅为空字符串。我认为问题可能在于模拟变更事件

---

因为标题值根本没有更新。我还需要做什么吗？如何更新DOM文本值？

我没有代表添加注释，因此必须这样做。请参考这个，这是一个已知的错误。他们试图解决这个问题的一些方法是 设定目标值

TitleInput.simulate('change', {target: {value: 'Test'}});

设置节点值

TitleInput.node.value = 'Test';

通过模拟多个按键

TitleInput.simulate('keydown', {keyCode: 13, target: {value:'Test'}});

或者改为使用onChangeText事件

TitleInput.simulate('onChangeText', 'Text')

---

这里的问题不在于

change

模拟，而在于

expect

中使用的输入实例将测试用例更改为这样做了

测试用例：

class ModalComp extends Component {
  state = {
    title: '',
    visible: false,
  };
  onChange = e => {
    this.setState({ title: e.target.value });
  };
  showModal = () => {
    this.setState({ visible: true });
  };
  render() {
    const { title } = this.state;
    return (
      <div>
        <Button type="primary" onClick={this.showModal} />
        <Modal
          visible={this.state.visible}
          onOk={this.handleOk}
          style={{ top: 53 }}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
          footer={null}
        >
          <Input
            placeholder="Title"
            autosize
            value={title}
            onChange={this.onChange}
          />
        </Modal>
      </div>
    );
  }
}

export default ModalComp;

it('allows user to enter text in Title input when the modal is open', () => {
  component = mount(<ModalComp />);
  const button = component.find(Button);
  button.simulate('click');
  component.update();
  const title = 'newtitle';
  const TitleInput = component.find(Input);
  TitleInput.simulate('change', { target: { value: title } });
  component.update();
  expect(TitleInput.props().value).toEqual(title);
});

it('allows user to enter text in Title input when the modal is open', () => {
component = mount(<ModalComp />)
const button = component.find(Button)
button.simulate('click')
component.update()
const title = "newtitle"
const TitleInput = component.find(Input)
TitleInput.simulate('change', {target: {value: title}})
component.update()
//change in below expect statement in finding the input rather than using the 
//previous one will do the trick
expect(component.find(Input).props().value).toEqual(title)
})

it（'当模式打开时，允许用户在标题输入中输入文本'，（）=>{
组件=挂载（）
常量按钮=组件。查找（按钮）
按钮。模拟（'单击'）
component.update（）
const title=“newtitle”
常量TitleInput=component.find（输入）
TitleInput.simulate（'change'，{target:{value:title}}）
component.update（）
//在查找输入而不是使用
//前一个就可以了
expect（component.find（Input.props（）.value）.toEqual（title）
})

visible={visible}

它不应该是

visible={this.state.visible}

？在放置最小代码时，这是一个输入错误。我的主要问题是在测试部分。在我的情况下，所有这些似乎都不起作用。第一个是我尝试过做什么，第二个是给我一个错误，因为

使用反应元素istead

第三个和第四个也没有显示出任何效果。实际上，我所做的是正确的，除了

expect

语句中的

expect

语句的一部分使用我在模拟之前得到的组件实例，因此它返回空字符串“”。谢谢你的帮助