Question

我正在尝试测试具有子组件的react组件。子项有一个输入框，它将使用onChange更新其状态，然后onSubmit将回调父项更新父状态的文本。组件如下所示：

class App extends Component {

constructor(props) {
  super(props)
  this.state = {answer: ''};
}

answerHandler(_answer) {
  this.setState({
    answer: _answer
  })
}

render() {
  return (
    <div className='App'>
    <Letters answerHandler={this.answerHandler.bind(this)}/>
  </div>
);
}
}
export default App;

_

class Letters extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault()
      this.props.answerHandler(response.data.word)
  }

  render() {
    return (
      <div className="Letters">
        <form onSubmit={this.handleSubmit}>
        <label>
          Letters:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
      <input type="submit" value="Submit" />
    </form>
  </div>
  );
  }
 }

export default Letters;

运行测试时，我收到一条消息：方法“simulate”仅用于在单个节点上运行。 2找到了。

it('enter letters and check answer', () => {
  const wrapper = mount(<App />);
  wrapper.find('input').simulate('change', { target: { value: 'doof' }});
})

我不完全确定这意味着什么。我认为酶的安装应该用所有组件创建应用程序？如果我使用浅而不是mount，它会说0个节点而不是2个。从环顾四周看起来似乎暗示我监视回调但是这看起来很奇怪，你不能一起测试组件所以我确定我做错了什么

Answer 1

您有2个输入字段：

<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="Submit" />

所以酶不知道哪个模拟。尝试

wrapper.find('input').at(0).simulate('change', { target: { value: 'doof' }});

顺便说一句，我更喜欢单独测试组件，使用'浅'而不是'mount'。它将更容易测试，测试将更少脆弱。但这不是你的问题:)）

如何测试儿童组件的反应

1 个答案: