javascript - 带有 React 测试库的 Teste TablePagination Material UI

Question

这里我使用 Material UI 中的表格分页。

{showFooter && (
       <TableFooter data-testid="table-footer-repository">
           <TableRow data-testid="table-row-repository">
              <TablePagination
                    data-testid="table-pagination-repository"
                    classes={{ caption: classes.caption, toolbar: classes.toolbar }}
                    count={listaArquivos ? listaArquivos.length : 0}
                    rowsPerPage={rowsPerPage}
                    rowsPerPageOptions={[]}
                    page={page}
                    onPageChange={handleChangePage}
                    backIconButtonProps={{
                      cursor: 'pointer',
                      style: {
                        cursor: 'pointer',
                        marginRight: '16px',
                        color: page === 0 ? GRAY : DARK_CYAN,
                      },
                    }}
                    nextIconButtonProps={{
                      style: {
                        cursor: 'pointer',
                        marginLeft: '16px',
                        color: page === getNumPages() ? GRAY : DARK_CYAN,
                      },
                    }}
                    labelDisplayedRows={(obj) =>
                      `${obj.from}-${obj.to} de ${obj.count}`
                    }
                  />
                </TableRow>
              </TableFooter>
            )}

在不使用分页的测试中可以工作，但我无法使用分页进行测试。

我无法模拟单击 nextIconButton。如何模拟此点击？

it('Shows two pages of students', async () => {
    await act(async () => {
      customRender(
        <RepositorioArquivosTabela
          listaArquivos={listaModalDuasPaginas}
          showFooter
          carregando={false}
        />
      );
    });

    expect(screen.queryByTestId('table-footer-repository')).toBeInTheDocument();
    expect(screen.queryByTestId('table-row-repository')).toBeInTheDocument();
    expect(
      screen.queryByTestId('table-pagination-repository')
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[0].CampaignTitle)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[0].DueTimestamp)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[0].TimeToLive)
    ).toBeInTheDocument();

    expect(
      screen.getByText(listaModalDuasPaginas[1].CampaignTitle)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[1].DueTimestamp)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[1].TimeToLive)
    ).toBeInTheDocument();

    expect(
      screen.getByText(listaModalDuasPaginas[2].CampaignTitle)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[2].DueTimestamp)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[2].TimeToLive)
    ).toBeInTheDocument();

    expect(
      screen.getByText(listaModalDuasPaginas[3].CampaignTitle)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[3].DueTimestamp)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[3].TimeToLive)
    ).toBeInTheDocument();

    expect(
      screen.getByText(listaModalDuasPaginas[4].CampaignTitle)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[4].DueTimestamp)
    ).toBeInTheDocument();
    expect(
      screen.getByText(listaModalDuasPaginas[4].TimeToLive)
    ).toBeInTheDocument();

    const tablePagination = screen.getByTestId('table-pagination-repository');
    userEvent.click(tablePagination);

    // expect(
    //   screen.getByText(listaModalDuasPaginas[5].CampaignTitle)
    // ).toBeInTheDocument();
    // expect(
    //   screen.getByText(listaModalDuasPaginas[5].DueTimestamp)
    // ).toBeInTheDocument();
    // expect(
    //   screen.getByText(listaModalDuasPaginas[5].TimeToLive)
    // ).toBeInTheDocument();
  });

我相信，如果我可以模拟对 nextIconButtonProps 的点击，我可以模拟表格已前进到下一页，从而呈现新行

Answer 1

您可以使用以下代码获取按钮:

如果您之前必须等待任何异步操作

const nextPageButton = await screen.findByRole("button", {
  name: "Go to next page",
});

如果您不必等待

const nextPageButton = screen.getByRole("button", {
  name: "Go to next page",
});

name属性与按钮的名称相关。

现在，要模拟点击事件，请使用testing-libray/user-event包(版本14)

const user = userEvent.setup();
await user.click(nextPageButton);