rstacruz / jsdom-global

Enable DOM in Node.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

javatype opened this issue · comments

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",

Raised it on reactjs reactjs/react.dev#3577