ReactJs unit testing with jest and enzyme - reactjs

Question

I have the following return method in one of my components (AreaCodesTable):
<>
<Button
id="create-email-template"
className="p-button-rounded p-button-text p-button-icon-only blubicon-plus"
onClick={() => this.toggleCreateAreaCodeModal()}
></Button>
<Tooltip target={'#create-email-template'} content={this.props.t('common.areaCode')} position={'left'} />
<DataTable dataKey="id" id="area-codes-table" value={this.props.rootStore.areaCodeStore.areaCodes}>
<Column key="title" field="title" header={this.props.t('areaCodes.shared.title')} style={{ width: '11rem' }} />
<Column
key="description"
field="description"
header={this.props.t('areaCodes.shared.description')}
style={{ width: '11rem' }}
/>
<Column
body={this.showButtons}
headerStyle={{ width: '10%', minWidth: '8rem' }}
bodyStyle={{ textAlign: 'center' }}
></Column>
</DataTable>
<DeleteModal
deleteMode={this.state.showDeleteModal}
confirmDeleteTemplate={this.confirmDeletion}
discardDeleteTemplate={this.toggleDeleteAreaCodeModal}
header={this.props.t('areaCodes.delete.header')}
/>
{this.state.showEditModal && (
<EditAreaCodeModal
selectedAreaCode={this.state.selectedAreaCode}
confirmEdit={this.confirmEdit}
toggleEditAreaCodeModal={this.toggleEditAreaCodeModal}
visible={this.state.showEditModal}
rootStore={this.props.rootStore}
/>
)}
{this.state.showCreateModal && (
<CreateAreaCodeModal
rootStore={this.props.rootStore}
toggleCreateAreaCode={this.toggleCreateAreaCodeModal}
getAreaCodesRefresh={this.getAreaCodes}
/>
)}
</>
However I can't simulate a click in my unit tests.
describe('area codes table', () => {
const backendBaseUrl = 'http://localhost:8081';
const mockDataProvider = new DataProvider(backendBaseUrl);
const rootStore = new RootStore(mockDataProvider);
const props = {
rootStore: rootStore,
i18n: i18n,
t: t,
};
const initialState = {
showDeleteModal: false,
showEditModal: false,
showCreateModal: false,
selectedAreaCode: null,
};
let reactComponent: ShallowWrapper<IAreaCodesTableProps, IAreaCodesTableState>;
beforeEach(() => {
reactComponent = shallow(<AreaCodesTable {...props} />);
});
afterEach(() => {
reactComponent.unmount();
});
it('should show create modal', () => {
const createButton = reactComponent.find('button');
createButton.simulate('click');
});
});
Either I use reactComponent.find('#create-email-template') or .find('button') I get this error message: Method “simulate” is meant to be run on 1 node. 0 found instead. . For the first one I understand why- because we have to ids create-email-template, but for the second I dont know- I used Button, #button, #Button combinations as well, but didnt work.
This is the result from reactComponent.html():
<button
id="create-email-template"
class="p-button p-component p-button-rounded p-button-text p-button-icon-only blubicon-plus"
>
<span class="p-button-label p-c"> </span>
</button>
<div
id="area-codes-table"
class="p-datatable p-component"
data-scrollselectors=".p-datatable-scrollable-body, .p-datatable-unfrozen-view .p-datatable-scrollable-body"
>
<div class="p-datatable-wrapper">
<table role="grid">
<thead class="p-datatable-thead">
<tr role="row">
<th role="columnheader" class="p-sortable-disabled" style="width:11rem">
<span class="p-column-title"></span>
</th>
<th role="columnheader" class="p-sortable-disabled" style="width:11rem">
<span class="p-column-title"></span>
</th>
<th role="columnheader" class="p-sortable-disabled" style="width:10%;min-width:8rem">
<span class="p-column-title"></span>
</th>
</tr>
</thead>
<tbody class="p-datatable-tbody">
<tr role="row" class="p-datatable-emptymessage">
<td role="cell" colSpan="3">
No records found
</td>
</tr>
</tbody>
</table>
</div>
</div>
Everything is here.