Блог

Новый Material UI DatePicker имеет prop renderInput, который получает функцию, которая отображает текстовое поле. Работает достаточно хорошо, за исключением того, что эта функция отображается дважды, и при первом рендеринге она получает только часть необходимых реквизитов.

При рендеринге с помощью библиотеки тестирования React выполняется только первый рендеринг. Примечательно, что завершение отсутствует. Таким образом, невозможно getByRole('button') и нажать на кнопку, чтобы открыть модальный сборщик.

Я пробовал различные перестановки waitFor() и rerender() , но, похоже, не могу заставить кнопку отображаться.

Вот изолированная среда кода, которая показывает, что две версии параметров renderInput выходят из системы. (У меня также есть тест для поиска кнопки, но, к сожалению, я также делаю что-то не так с тестом, и он не запускается.)

Есть какие-нибудь предложения?

Это потому, что Mui DatePicker отображает мобильный вид по умолчанию.

Ниже будет исправлено это:

 beforeEach(() => {
  // add window.matchMedia
  // this is necessary for the date picker to be rendered in     desktop mode.
  // if this is not provided, the mobile mode is rendered, which might lead to unexpected behavior
  Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: (query: string): MediaQueryList => ({
      media: query,
      // this is the media query that @material-ui/pickers uses to determine if a device is a desktop device
      matches: query === '(pointer: fine)',
      onchange: () => {},
      addEventListener: () => {},
      removeEventListener: () => {},
      addListener: () => {},
      removeListener: () => {},
      dispatchEvent: () => false,
    }),
  });
});

afterEach(() => {
  delete window.matchMedia;
});
 

Для получения более подробной информации: проблема с github