无法读取未定义的 react-testing-library 的属性“addListener" [英] Cannot read property 'addListener' of undefined react-testing-library

问题描述

我正在尝试使用 react 测试库 测试我的 antd 应用程序，但我一直收到此错误:

<块引用>

TypeError: 无法读取未定义的属性addListener"

我正在使用自定义渲染，但错误似乎来自渲染"方法.

<块引用>

const customRender = (ui, options) =>渲染(用户界面，{包装:TestingWrapper，...选项})^

我什至使用相同版本的 react 和 react-dom(这似乎是 rtl 的常见问题).

<块引用>

反应":17.0.1"，react-dom":17.0.1"，

问题组件似乎是这样的:

import React, {懒惰的，悬念来自'反应';从 'antd/lib/list' 导入列表；const 故事 = (道具) =>{返回(<div className="stories-container"><div><h1 className="StoriesTitle">Stories</h1>

<div className=StoryListContainer"><Suspense fallback={<Spin/>}><列表itemLayout=垂直"大小=默认"；分页={分页}数据源={故事}renderItem={item =><故事项目项目={项目}deleteFn={onDelete}登录={登录}故事={故事}/>}/></悬念>

);}

它似乎在模块 'antd/lib/_util/responsiveObserve' 中出错，该模块是 antd 的 List 组件的一部分.去掉那个组件可以让测试工作(虽然显然我不想从我的应用程序中删除它).

解决方案

您可能在 jest setupTest.js 文件中使用定义 window.matchMedia 吗?对我来说修复它的是将它从 window.matchMedia 移动到 global.matchMedia 就像他们在 这个仓库.

global.matchMedia = global.matchMedia ||功能 () {返回 {addListener: jest.fn(),removeListener: jest.fn(),};};

I'm trying to test my antd application with react testing library, but I keep getting this error:

TypeError: Cannot read property 'addListener' of undefined

Im using a custom render but the error seems to be coming from the 'render' method.

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

I´m even using the same versions of react and react-dom (which seems to be a common issue with rtl).

"react": "17.0.1", "react-dom": "17.0.1",

The problematic component seems to be this:

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>
    );
}

It seems to error out in the module 'antd/lib/_util/responsiveObserve' which is a part of antd's List component. Taking that component out makes the test work (though obviously I don't want to remove it from my application).

解决方案

Are you perhaps using defining window.matchMedia in your jest setupTest.js file? What fixed it for me is to move it from window.matchMedia to global.matchMedia like how they did it in this repo.

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

这篇关于无法读取未定义的 react-testing-library 的属性“addListener"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！