ReactJs unit testing with jest and enzyme

Viewed 40

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">&nbsp;</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.

0 Answers
Related