rstacruz / jsdom-global

Enable DOM in Node.js
477 stars 38 forks source link

testing stateless component in react gives - TypeError: Cannot set property event of #<Window> which has only a getter #56

Closed javatype closed 3 years ago

javatype commented 3 years ago

I am using jsdom-global library but facing this issue when I do mount with enzyme.

describe('', function () { it('should render 4 menu options', function () { const handleSearchCallBack = (event) => { }; const wrapper = mount(); }); });

import Button from '@material-ui/core/Button'; import SearchIcon from '@material-ui/icons/Search'; import React from 'react'; const TextIconSearchButton = ({handleOnClick}) => (

); export default TextIconSearchButton;

On running a test, mocha --require @babel/register --require test/testSetup.js -require jsdom-global/register, it continously printed below error Error: Uncaught [TypeError: Cannot set property event of # which has only a getter]

and then,

Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

This happens when I do mount instead of shallow. at this line from react-dom.js if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) { window.event = windowEvent; }

"jsdom-global": "3.0.2", "react": "16.8.2", "enzyme": "^3.11.0",

javatype commented 3 years ago

Raised it on reactjs https://github.com/reactjs/reactjs.org/issues/3577