Как мне проверить кнопку html в React?

Question

У меня есть следующий код (упрощенный для понимания):

class ClassA extends React.Component {

constructor(props) {
  super(props);

  this.state = {
    clicked: true
  }
}

render () {
 return (
   <Snackbar
     clicked={this.state.clicked}
     message={
       <div> This is the message </div>
     }
     action={[
       <Button variant="contained" color="primary" onClick={functionCall}>
         Go
       </Button>
     ]}
   />
 );
}

Как проверить элемент?Я попытался уменьшить ClassA, затем обработать Snackbar, но я все еще не могу вызвать .simulate('click') на кнопке.

По сути, как вы обрабатываете / симулируете фрагмент кода, который передается в качестве опорыболее высокий узел?

Answer 1

Чтобы протестировать кнопку, которая передается в качестве подпорки компоненту Snackbar, вам необходимо получить подпорку для Snackbar, а затем смонтировать действия перед имитацией щелчка, поскольку она будет работать только на смонтированном компоненте ине опора

const component = shallow(<ClassA />);
const SnackbarAction = component.find(Snackbar).prop('action')[0];
const button = shallow(SnackbarAction);
button.simulate('click');

Answer 2

Попробуйте следующий фрагмент кода, где мы получаем доступ к подпорке из мелко установленной обертки.

const wrapper = shallow(<ClassA />);
wrapper.find('Snackbar').prop('action')[0].simulate('click');

Если это не сработает, вы можете попробовать

wrapper.find('Snackbar').prop('action')[0].prop('onClick')();