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

尝试以下代码，从浅层包装器访问道具。

nil

如果这不起作用，您可以尝试

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

Answer 2

为了测试作为道具传递给Snackbar组件的按钮，您需要将道具传递给Snackbar，然后在模拟点击之前先将动作浅装，因为它仅适用于已安装的组件和不是道具

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

如何在React道具中测试html按钮？

2 个答案: