TypeError: element.observer.disconnect is not a function

[perevezencev]

Expected behavior

react-intersection-list should work with mock implementation of IntersectionObserver

Current behavior

I am trying write test for component which include a react-intersection-list and getting error

    TypeError: element.observer.disconnect is not a function

      at unobserveElement (node_modules/@researchgate/react-intersection-observer/lib/js/observer.js:96:26)
      at IntersectionObserver.unobserve (node_modules/@researchgate/react-intersection-observer/lib/js/IntersectionObserver.js:102:38)
      at IntersectionObserver.componentWillUnmount (node_modules/@researchgate/react-intersection-observer/lib/js/IntersectionObserver.js:155:
12)
      at callComponentWillUnmountWithTimer (node_modules/react-dom/cjs/react-dom.development.js:21896:12)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:336:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:385:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:440:31)
      at safelyCallComponentWillUnmount (node_modules/react-dom/cjs/react-dom.development.js:21903:5)
      at commitUnmount (node_modules/react-dom/cjs/react-dom.development.js:22392:11)
      at commitNestedUnmounts (node_modules/react-dom/cjs/react-dom.development.js:22486:5)
      at unmountHostComponents (node_modules/react-dom/cjs/react-dom.development.js:22810:7)
      at commitDeletion (node_modules/react-dom/cjs/react-dom.development.js:22896:5)
      at commitMutationEffects (node_modules/react-dom/cjs/react-dom.development.js:25323:11)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:336:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:385:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:440:31)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:25050:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:697:12)
      at runWithPriority$2 (node_modules/react-dom/cjs/react-dom.development.js:12149:10)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:24922:3)
      at finishSyncRender (node_modules/react-dom/cjs/react-dom.development.js:24329:3)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:24307:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23698:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:27103:3)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:27544:5)
      at node_modules/react-dom/cjs/react-dom.development.js:27649:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:24433:12)
      at Object.unmountComponentAtNode (node_modules/react-dom/cjs/react-dom.development.js:27648:5)
      at cleanupAtContainer (node_modules/@testing-library/react/dist/pure.js:123:21)
          at Set.forEach (<anonymous>)
      at cleanup (node_modules/@testing-library/react/dist/pure.js:117:21)
      at Object.<anonymous>.afterEach (node_modules/@testing-library/react/dist/index.js:26:23)

Steps to reproduce

1. Have a component with react-intersection-list
2. Define mock of IntersectionObserver in jest.setup.js

global.IntersectionObserver = class IntersectionObserver {
  constructor() {}

  observe() {
    return null;
  }

  unobserve() {
    return null;
  }
};

2. Write test like this

import React from 'react';
import { render, wait } from '@testing-library/react';

describe('<List />', () => {
    it('should render', async () => {
      const { container } = render(<List />);

      expect(container).toMatchSnapshot();
      await wait(() => {
        expect(container).toMatchSnapshot();
      });
  });
});

Context (environment)

• Version: 3.0.8
• Platform: OS X, node v11.10.1

[Rendez]

I guess you need a module mock defined in __mocks__ instead of your setup file.