Question

我有一个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);
});

我能够正确找到节点，但该值仅是一个空字符串""。我认为问题可能出在模拟变更事件上由于标题值根本没有更新。我还需要做更多的事情吗？如何更新DOM文本值？

Answer 1

我没有代表要添加评论，因此必须这样做。请参考此https://github.com/airbnb/enzyme/issues/76，这是一个已知的错误。他们尝试解决此问题的一些方法是设置目标值

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

设置节点值

TitleInput.node.value = 'Test';

通过模拟多个按键

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

或通过使用onChangeText事件代替

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

Answer 2

这里的问题不在于change模拟，而是expect更改测试用例中使用的输入实例来达到目的。

测试用例：

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)
})

无法刺激模态输入的变化：React-Redux

2 个答案: