Javascript 子组分的酶法检测

我对测试非常陌生，目前正在用jest/酶测试React成分。 我有一个父组件

ParentComp.jsx

export class ParentComp extends React.Component {
    super(props);
    this.state = {
      selectedTemplate: "",
      disabled: true
    };

    return <Modal
      header={<h2>Header</h2>}
      visible={true}
      footer={<span>
        <Button
          disabled={false}
          onClick={ () => {
            sessionStorage.setItem('id', this.state.id);
          }}
        >
          Continue
        </Button>
     }>
         <h1> My modal </h1>
     </Modal>
}

    const wrapper = shallow(<ParentComp/>);
    wrapper.find(Modal).first().props().footer.find(Button).simulate('click')
    jest.spyOn(window.localStorage.__proto__, 'setItem');
    window.localStorage.__proto__.setItem = jest.fn();

    // assertions as usual:
    expect(localStorage.setItem).toHaveBeenCalled();
    expect(global.sessionStorage.getItem).toBecalledWith('id',1)
}

导出类ParentComp扩展React.Component{
超级（道具）；
此.state={
已选择模板：“”，
残疾人士：对
};
返回
继续
}>
我的情态
}

我如何测试onClick并确保会话存储经过测试？ 我已经试过了：

ParentComp.spec.jsx

export class ParentComp extends React.Component {
    super(props);
    this.state = {
      selectedTemplate: "",
      disabled: true
    };

    return <Modal
      header={<h2>Header</h2>}
      visible={true}
      footer={<span>
        <Button
          disabled={false}
          onClick={ () => {
            sessionStorage.setItem('id', this.state.id);
          }}
        >
          Continue
        </Button>
     }>
         <h1> My modal </h1>
     </Modal>
}

    const wrapper = shallow(<ParentComp/>);
    wrapper.find(Modal).first().props().footer.find(Button).simulate('click')
    jest.spyOn(window.localStorage.__proto__, 'setItem');
    window.localStorage.__proto__.setItem = jest.fn();

    // assertions as usual:
    expect(localStorage.setItem).toHaveBeenCalled();
    expect(global.sessionStorage.getItem).toBecalledWith('id',1)
}

const wrapper=shallow（）；
wrapper.find（模态）.first（）.props（）.footer.find（按钮）.simulate（'click'））
jest.spyOn（window.localStorage；
window.localStorage.\uuuu proto\uuuuu.setItem=jest.fn（）；
//一如既往的断言：
expect（localStorage.setItem）.toHaveBeenCalled（）；
expect（global.sessionStorage.getItem）.toBecalledWith（'id'，1）
}

---

谢天谢地，我没有收到任何实际错误，然而，我在ParentComp中的会话存储行显然没有被覆盖。我该如何处理这一行呢？

我有一个想法，在这种情况下，直接调用prop

onClick

，而不是模拟单击。只要你能在页脚中找到你的

，然后调用它的

属性onClick

。让我们试试：

//您可以使用console.log查看选择正确选项的正确方法
//我不确定下面的路线是否正确：）
const yourButton=wrapper.find（Modal）.first（）.props（）.footer.props.children；
yourButton.props.onClick（）；

在这种情况下，我想直接调用prop

onClick

，而不是模拟单击。只要你能在页脚中找到你的

，然后调用它的

属性onClick

。让我们试试：

//您可以使用console.log查看选择正确选项的正确方法
//我不确定下面的路线是否正确：）
const yourButton=wrapper.find（Modal）.first（）.props（）.footer.props.children；
yourButton.props.onClick（）；

你能把

console.log（wrapper.debug（））

的输出发布到错误之前的那一行吗？@Shadab添加了那一行代码，但没有；我什么也没做。输出是否应该显示在终端上？对不起，正如我说的，我是测试新手，你的页脚到底是什么？只按按钮还是

？@tmhao2005是

我给了你一个提示：）你能把

console.log（wrapper.debug（））

的输出发布到错误前一行吗？@Shadab添加了那一行代码，但它没有；我什么也没做。输出是否应该显示在终端上？对不起，正如我说的，我是测试新手，你的页脚到底是什么？只按按钮还是

？@tmhao2005是

我给了你一个提示：）