search

srigar / multiselect-react-dropdown

React multiselect dropdown with search and various options
https://10xn41w767.codesandbox.io/
MIT License
200 stars 114 forks source link

Error: Uncaught [TypeError: Cannot read property 'addEventListener' of null] thrown when using component in tests #78

Closed jayce1996 closed 2 years ago

jayce1996 commented 4 years ago

Whilst my code executes both in the react dev environment, and in a live build, for some bizarre reason I get this error when running jest tests, even the simplest components that contain nothing other than a div and then a bare bones implementation of multiselect-react-dropdown will throw this error when trying to create a jest snapshot.

the following errors are observed: TypeError: Cannot read property 'addEventListener' of null

  41 | describe('Check CommentTypeSelector snapshot', () => {
  42 |     test('Basic snapshot of CommentTypeSelector', () => {
> 43 |         const app = renderer.create(<Provider store={store}>
     |                              ^
  44 |             <div>
  45 |                 <CommentTypeSelector
  46 |                     setCommentTypes={setCommentTypes}

  at t.value (node_modules/multiselect-react-dropdown/build/index.js:1:18020)
  at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10428:22)
  at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)
  at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9972: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-test-renderer/cjs/react-test-renderer.development.js:10021:16)
  at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10073:31)
  at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13033:9)
  at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
  at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
  at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12873:3)
  at finishSyncRender (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12384:3)
  at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12370:7)
  at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
  at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
  at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
  at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1820:7)
  at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:3)
  at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11776:9)
  at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14747:3)
  at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15455:5)
  at Object.test (src/CommentTypeSelector.test.jsx:43:30)
srigar commented 2 years ago

Fix available in v2.x.x. Reopen it, if doesnt woork

alex-akanthas commented 1 year ago

@srigar I'm still getting this error with version 2.0.25 and jest

/**
 * @jest-environment jsdom
 */

import renderer from 'react-test-renderer';
import { Multiselect } from 'multiselect-react-dropdown';

it('multiselect renders', () => {
    let state = {
        options: [{name: 'Option 1', id: 1},{name: 'Option 2', id: 2}]
    };

  const tree = renderer
    .create(<Multiselect
            options={state.options} // Options to display in the dropdown
            displayValue="name" // Property name to display in the dropdown options
      />
)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Any help would be much appreciated. The component itself works great with some nice fixes being observed after we upgraded from 1.6 to 2.0.25 :-)