打开和关闭对话框模式并等待提供者的响应

Question

使用 React 测试库测试对话框提供程序。我可以让它打开，并断言它出现了——但由于某种原因，我无法让它在测试中关闭。我需要重新渲染吗？

test('await the closing or confirming of the modal', async () => {
  const { debug, getByText, queryByText } = render(
    <DialogProvider>
      <Test />
    </DialogProvider>,
  );
  const openDialogButton = getByText(/click me/i);
  fireEvent.click(openDialogButton);
  await wait(() => getByText(/ok/i));
  fireEvent.click(getByText(/ok/i));
  debug();
});


function Test() {
  const confirm = useConfirmation();
  return (
    <button
      onClick={() => {
        confirm({ variant: 'info' });
      }}
    >
      click me
    </button>
  );
}

Answer 1

显然，以下似乎有效

  await waitForElement(() => getByText(/ok/i));
  fireEvent.click(getByText(/ok/i));
  await waitForElementToBeRemoved(() => queryByText(/ok/i));
  expect(queryByText(/ok/i)).toBeNull();