小编key*_*ior的帖子

我正在使用 react-responsive 在 react 组件中显示一些元素。我有一个集成测试，它拍摄了应用程序的快照，但快照向我显示了媒体查询组件应该在的空跨度。就好像测试库不知道如何使用响应式媒体查询，因为如果我将媒体查询注释掉并用简单的跨度替换，那么快照将打印出来。

我已经在线浏览了文档，但没有找到有效的解决方案。

尝试将此添加到测试文件的顶部：

global.window.matchMedia = jest.fn().mockReturnValue({
matches: true,
addListener: () => {},
removeListener: () => {},

});

这是一个使用 react-responsive 的组件示例：

const AutoInfo = ({ vehicle }) => {
  return (
    <>
      <MediaQuery maxWidth={599}>
        {<span>Contents to be shown at Mobile</span>}
      </MediaQuery>
      <MediaQuery minWidth={600}>
        {<span>Contents to be shown at Desktop</span>}
      </MediaQuery>
    </>
  );
};

这是我在应用程序中使用 VehicleInfo 组件的地方：

<Field name={name}>
  {({ field }) => (
    <VisualCheckbox
      {...field}
      checked={field.value}
      onChange={handleOnChange(field, onChange)}
      disabled={!field.value && !allowMoreVehicles}
    >
      <IconAuto label={<AutoInfo vehicle={vehicle} />} /> …