Cannot read property 'addListener' of undefined react-testing-library

Question

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).

score 38 · Accepted Answer · edited Nov 29 '21 at 02:20

38

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

edited Nov 29 '21 at 02:20

MD Ashik

9,117
10
52
59

answered Nov 17 '20 at 09:06

Albert Manuel

536
4
8

Yup, that seems to have done the trick. I also have matches: false on that return statement, but I don't know wether it made a difference or not. – Demian Nov 18 '20 at 14:14

score 12 · Answer 2 · edited Jan 13 '21 at 11:58

12

Try the below code, which works for me.

  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(),
  })

edited Jan 13 '21 at 11:58

Adrian Mole

49,934
160
51
83

answered Jan 13 '21 at 04:47

keating

327
4
4

1

This works for me, however the `delete window.matchMedia` is redundant, as you're overriding it on the next line anyway – Alex Lomia Mar 01 '22 at 16:18
1

This was it for me, when the accepted answer and https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function wasn't working – user Sep 06 '22 at 06:12

score 0 · Answer 3 · answered Nov 13 '20 at 03:33

0

The problem is that during the tests document does not exist. You can use a library like jsdom: https://github.com/jsdom/jsdom

answered Nov 13 '20 at 03:33

andriusain

1,211
10
18

1

I'm running my application inside CRA ( https://create-react-app.dev/docs/running-tests/ ) JSDOM is included by default (in fact, running the test with --env=node yields a different error - "Document not defined" - and makes another test in the suite fail), so I'm reasonably confident that jsdom is not the problem. It seems to error out in the module 'antd/lib/_util/responsiveObserve' which is a part of antds List component. Taking that component out makes the test work (though obviously I don't want to remove it from my application). – Demian Nov 13 '20 at 14:54

Cannot read property 'addListener' of undefined react-testing-library

3 Answers3

Linked