Mui DatePicker 按钮在测试中首次渲染时不可用

Question

新的 Material UI DatePicker有一个 renderInput 属性，它获取渲染文本字段的函数。工作得很好，除了这个函数被渲染两次，并且在第一次渲染时它只接收它需要的一些道具。

当使用 React 测试库渲染时，仅发生第一次渲染。值得注意的是，endAdornment 不存在。因此不可能getByRole('button')单击按钮来打开选择器模式。

我尝试了waitFor()和的各种排列rerender()，但似乎无法显示按钮。

这是一个代码沙箱，显示了被注销的 renderInput 参数的两个版本。（我还在那里进行了一个测试来寻找按钮，但不幸的是我也对测试做了一些错误的事情并且它没有运行。）

有什么建议么？

Answer 1

这是因为 Mui\xe2\x80\x99s DatePicker 默认渲染移动视图。

\n

下面将修复它：

\n

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

\n

更多详情：github问题

\n