无法读取未定义的 react-testing-library 的属性“addListener”

Question

我正在尝试使用react testing library测试我的antd应用程序，但我不断收到此错误：

类型错误：无法读取未定义的属性“addListener”

我使用自定义渲染，但错误似乎来自“渲染”方法。

const customRender = (ui, options) => render(ui, { wrapper: TestingWrapper, ...options }) ^

我什至使用相同版本的 react 和 react-dom（这似乎是 rtl 的常见问题）。

“反应”：“17.0.1”，“反应dom”：“17.0.1”，

有问题的组件似乎是这样的：

import React, {
  lazy,
  Suspense
} from 'react';

import List from 'antd/lib/list';
  
const Stories = (props) => {
    return(
  <div className="stories-container">

    <div>
      <h1 className="StoriesTitle">Stories</h1>
    </div>

    <div className="StoryListContainer">
     <Suspense fallback={<Spin />}>
        <List
          itemLayout="vertical"
          size="default"
          pagination={pagination}
          dataSource={stories}
          renderItem={item =>
            <StoryItem
              item={item}
              deleteFn={onDelete}
              loggedIn={loggedIn}
              stories={stories}
            />
          }
        />
      </Suspense>
    </div>

  </div>
    );
}

它似乎在模块 'antd/lib/_util/responsiveObserve' 中出错，该模块是 antd 的 List 组件的一部分。取出该组件使测试工作（尽管显然我不想从我的应用程序中删除它）。

Answer 1

您可能在 jest setupTest.js 文件中使用定义 window.matchMedia 吗？对我来说修复它的是将它从 window.matchMedia 移动到 global.matchMedia 就像他们在这个 repo 中所做的那样。

global.matchMedia = global.matchMedia || function () {
  return {
    addListener: jest.fn(),
    removeListener: jest.fn(),
  };
};

Answer 2

尝试下面的代码，它对我有用。

  delete window.matchMedia
  window.matchMedia = (query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })