javascript - 模态中的单击事件 - 测试

Question

尝试对以下代码运行测试，但找不到节点。为ReactJS使用jest和enzyme

 render () {
return (
  this.state.permissionsLoaded ?
  this.state.localPermissions[globals.UI_DATASOURCEDESIGNER] ? 
  this.state.datasourcePermissionsLoaded ?
  this.state.allowCurrentDatasource ?
      <div>
       <Modal isOpen={this.state.addRequestModalOpen} style={shareModal}>
       <div title="Close Window Without Saving" className="sidemodal_addnew_x" onClick={() => {this.closeAddModal()}}><FontAwesome name='xbutton' className='fa-times' /></div>

不断收到以下错误:方法“simulate”应在 1 个节点上运行。找到 0 个。

这是我迄今为止的测试结果:

beforeEach(() => wrapper = mount(<MemoryRouter keyLength={0}><Datasource {...baseProps} /></MemoryRouter>));


 it("Test Click event on Add DataSource ", () => {
  wrapper.find('Datasource').setState({
   permissionsLoaded:true,
   localPermissions:true,
   datasourcePermissionsLoaded:true,
   allowCurrentDatasource:true,
   addRequestModalOpen:true

   })
  wrapper.update();
  wrapper.find('Datasource').find('.sidemodal_addnew_x').simulate('click')

 });

这里是我所在州的列表:

permissionsLoaded: false,
datasourcePermissionsLoaded: false,
allowCurrentDatasource: false,
localPermissions:{
    [globals.UI_DATASOURCEDESIGNER]:false,
  }

Answer 1

好吧，看起来你正试图找到一个节点，如果你提到的所有状态变量都为 true，则该节点将有条件地呈现，但它们都不是(实际上你将它们全部设置为 false 并更新包装器预先)。这意味着找不到可用于模拟点击的 .sidemodal_addnew_x，因此您会收到该错误消息。

如果您想测试该组件是否存在，可以执行以下操作:

expect(wrapper.find('Datasource').find('.sidemodal_addnew_x').exists()).to.equal(false);

如果您确实想测试点击，请确保通过将状态变量设置为 true 来渲染组件 .sidemodal_addnew_x:

it("Test Click event on Close Window Without Saving", (done) => {
  baseProps.onClick.mockClear();
  wrapper.find('Datasource').setState({
    permissionsLoaded:true,
    localPermissions:true,
    datasourcePermissionsLoaded:true,
    allowCurrentDatasource:true,
    addRequestModalOpen:true,
    }, () => {
      wrapper.update();    
      wrapper.find('Datasource').find('.sidemodal_addnew_x').simulate('click');
      done();
    });
});