javascript - 使用 Material UI 和 React 测试库时从对话框测试 onClose 回调？

Question

我目前正试图在我的 React 应用程序上获得完整的测试覆盖率，但是在尝试测试来自 Material UI 组件的回调事件参数时，我一直在开 Jest 。

我想通过测试转义事件我可以覆盖 onClose 参数，但它仍然显示为未测试。

该测试的示例:

function renderWithRedux(
  ui: any,
  startingState: any = initialState,
  store?: any
) {
  if (!store) {
    store = createStore(reducer, startingState);
  }
  return {
    ...render(<Provider store={store}>{ui}</Provider>),
    // adding `store` to the returned utilities to allow us
    // to reference it in our tests (just try to avoid using
    // this to test implementation details).
    store,
  };
}


test("Should close the dialog on exit event eg esc key pressed", () => {
  const { container, queryByTestId } = renderWithRedux(
    <PermissionGroupList />,
    permissionGroupCat
  );
  fireEvent(
    queryByTestId("add-group"),
    new MouseEvent("click", {
      bubbles: true,
      cancelable: true,
    })
  );
  let dialogBox = queryByTestId("add-group-dialog");

  // Check that the dialog is open.
  expect(dialogBox).toBeTruthy();
  // Check that the dialog it closes.
  fireEvent.keyDown(document.body, {
    key: "Escape",
    keyCode: 27,
    which: 27
  })
  setTimeout(() => {
    // Try to re get the element.
    dialogBox = queryByTestId("add-group-dialog");
    expect(dialogBox).toBeNull();
  }, 500);
})

将绑定(bind)的 closeDialog 方法传递给子组件时出现相同或类似的问题。它似乎未经测试。我将如何测试它/如果它触发方法(在子组件上)，它是否会被子组件的测试覆盖，我还没有创建子组件测试。

正如您在上面的屏幕截图中看到的那样，这两行返回时都是未经测试的，那么我如何用我的测试来覆盖它们。

我正在使用 react-testing-library 和 jest --coverage 以及 redux 和 react-redux。

Answer 1

您在同步测试中运行的异步代码。如果您在测试中使用 setTimeout，那么您需要传入一个 done() 函数，然后在最后一个异步事件完成时调用它。

https://jestjs.io/docs/en/asynchronous