javascript - React 测试库找不到 React-responsive 媒体查询中使用的任何组件

Question

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

我查看了在线文档，但没有找到有效的解决方案。

尝试将其添加到测试文件的顶部:

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: () => {},
  addEventListener: () => {},
  removeEventListener: () => {},
});

显然，默认情况下，测试库不知道浏览器窗口的宽度，因此通过添加它，它现在可以呈现我的 MediaQuery 组件中最大宽度为 599px 的任何内容!虽然在我的快照中它实际上呈现了两个媒体查询的内容(最大宽度:599px 和最小宽度:600px)但至少我能够呈现内容并修复我的测试。