Проверить обратный вызов onClose из диалогового окна при использовании пользовательского интерфейса материала и библиотеки тестирования реакции?

Question

В настоящее время я пытаюсь получить полное тестовое покрытие для своего приложения реагирования, однако я застрял в шутке, когда пытаюсь протестировать параметры события обратного вызова из материальных компонентов пользовательского интерфейса.

Я подумал, тестируя событие escapeЯ мог бы охватить параметр 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);
})

Та же или похожая проблема при передаче метода привязанного closeDialog вдочерний компонент. Это кажется непроверенным. Как мне проверить это / будет ли он покрыт тестами дочернего компонента, если он запускает метод (на дочернем), я еще не создал тесты дочернего компонента.

Как вы можете видеть на скриншоте выше, обе эти строки возвращаются как непроверенные, так как я могу покрыть их своими тестами.

Я использую реагирующую библиотеку тестированияи шутка - охват редуксом и реактив-редуксом.

Answer 1

Я рекомендую не создавать функции стрелок в качестве реквизита. Вот более подробное объяснение недостатков и альтернативных подходов: https://medium.com/@oleg008/arrow-functions-in-react-f782d11460b4

Это также сделает так, чтобы эти тесты были охвачены вашими тестами. Хотя вам также может потребоваться проверить, что метод класса handleGroupDialog вызывается. Вы можете сделать это с шпионом: https://remarkablemark.org/blog/2018/06/13/spyon-react-class-method/

Дэвид тоже прав! Вы захотите использовать готовый метод или преобразовать свой тест в асинхронный и ждать.

Answer 2

Ваш асинхронный код выполняется в тесте синхронизации. Если вы используете setTimeout в своем тесте, вам нужно передать функцию done() и затем вызвать ее, когда закончится ваше последнее асинхронное событие.

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