Question

我对测试非常陌生，目前正在测试带有笑话/酶的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>
}

我将如何测试onClick并确保对sessionStorage进行测试？我已经尝试过：

ParentComp.spec.jsx

    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中的sessionStorage行。我将如何覆盖这条线？

Answer 1

在这种情况下，我有一个想法是直接调用prop onClick而不是模拟点击。只要您可以在页脚中找到<Button />，然后将其道具命名为onClick。让我们尝试一下：

// You can console.log to see what is the correct to select the right one
// I'm not sure below route is correct :) 
const yourButton = wrapper.find(Modal).first().props().footer.props.children;

yourButton.props.onClick();

酶-测试子组件的onClick

1 个答案: