Как смоделировать inputRef текстового поля

Question

Мой пользовательский интерфейс содержит текстовое поле, кнопку и текстовый результат.

При вводе строки, затем нажмите кнопку УДАЛИТЬ, текстовый результат не содержит 'dog'

    class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: '',
    };
  };

  handleConvertString = (event) => {
    let str = this.inputRef.value;
    this.setState({
      text: str.replace(/dog/gi, ''),
    })
  };
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <TextField
          label="the string what you want to remove 'dog' "
          style={{ margin: 8 }}
          fullWidth
          margin="normal"
          ref="myField"
          inputRef={ref => { this.inputRef = ref; }}
          InputLabelProps={{
            shrink: true,
          }}
        />
        <div style={styleDivButton}>
          <Button className={classes.button} onClick={this.handleConvertString}>Remove</Button>
        </div>
        <p>{'"' + this.state.text + '"'}</p>
      </div>
    )
  }
}

export default MyComponent;

Как издеваться this.inputRef.value

it('test handler handleRemove', () => {
  const wrapper = shallow(<Exercise1 />);
  //how to mock this.inputRef.value = "dog is a loyal pet"

  wrapper.instance().handleConvertString();
  expect(wrapper.state('text')).toBe(" is a loyal pet");
});

Answer 1

Я издеваюсь, присваивая непосредственно wrapper. Тест пройден. Но я не уверен, что это правильный подход

it('test handler handleRemove', () => {
  const wrapper = shallow(<Exercise1 />);
  wrapper.instance().inputRef = {value: "dog is a loyal pet"} //mock this.inputRef.value = "dog is a loyal pet"

  wrapper.instance().handleConvertString();
  expect(wrapper.state('text')).toBe(" is a loyal pet");
});