Question

试图弄清楚为什么我的点击测试事件不起作用。我对同一文件的另一个单击事件应用了相同的设置，并且可以正常工作。使用Jest和Enzyme进行React JS 目标：能够捕获节点并通过测试的点击事件

这是我到目前为止的测试用例：

Test.js

 describe("Test Modal Components and Events ", () => {
let mountingDiv;
let wrapper;

beforeEach(() => {
wrapper = mount(<MemoryRouter keyLength={0}  initialEntries={["/add"]} ><Policies {...baseProps} /></MemoryRouter>);
mountingDiv = document.createElement('div');
document.body.appendChild(mountingDiv);
})

测试用例

it('Test click event on Close - Modal', () => {
 ReactModal.setAppElement('body');
 wrapper = mount( <ReactModal isOpen></ReactModal>,
  {attachTo: mountingDiv}
 );
 wrapper.setState({
    quickFilterModalOpen: false,
 })
 wrapper.update()
 expect(!!document.body.querySelector('.fullmodal')).toEqual(true);
 expect(!!document.body.querySelector('.sidemodal_addnew_x')).toEqual(true)
 document.querySelector("#closemodal-id").click();
});

这是file.js

<Modal isOpen={this.state.quickFilterModalOpen} style={descriptionModalStyle}>
  <div>
    <div className='fullmodal'>
    <div className='sidemodal_addnew_x' id="closemodal-id" onClick={this.closeModal}>

Answer 1

模式应该对单击关闭按钮可见。将quickFilterModalOpen设置为true，然后使用.find(selector)查找要单击的元素。（https://airbnb.io/enzyme/docs/api/ReactWrapper/find.html）

    wrapper.setState({
        quickFilterModalOpen: true,
    })
    wrapper.update()
    wrapper.find("#closemodal-id").simulate("click");

Answer 2

我认为这是一个具有约束力的问题，我将使用事件监听器，否则将采用类似的方法 onClick = {this.closeModal.bind（this）}或类似内容，取决于您的代码希望对您有帮助

模态内的Click事件：无法读取null的属性“ click”

2 个答案: