React 测试库找不到在响应式媒体查询中使用的任何组件

Question

我正在使用 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} />} />
    </VisualCheckbox>
  )}
</Field>

这是来自快照的渲染标记。这在浏览器中按预期工作，但是快照不会呈现标记，而是打印出一个空跨度，我希望在其中看到我的格式化文本：

<span class="lm-Icon-label lm-Icon--label" />

Answer 1

我希望这可以帮助其他有类似问题的人。

我解决了这个问题。首先，我需要在我的测试的 beforeEach() 部分添加它：

window.matchMedia('(max-width: 599px)');

然后我不得不matchMedia()像这样模拟这个函数：

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

显然，默认情况下，测试库没有关于浏览器窗口有多宽的概念，所以通过添加它，它现在呈现我的 MediaQuery 组件中具有最大宽度的任何内容：599px！尽管在我的快照中它实际上呈现了两个媒体查询的内容（最大宽度：599 像素和最小宽度：600 像素），但至少我能够呈现内容并修复我的测试。