时间戳

首页 > 解决方案 > 模态内的单击事件：无法读取 null 的属性“单击”

javascript - 模态内的单击事件：无法读取 null 的属性“单击”

问题描述

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

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

测试.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}>

标签： javascriptreactjsjestjsenzyme

解决方案

modal 应该是可见的，以便单击关闭按钮。设置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");

推荐阅读