Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: element.setAttribute is not a function The above error occurred in the <Transition> component #436

Open
isabelacmor opened this issue Dec 14, 2018 · 12 comments

Comments

@isabelacmor
Copy link

isabelacmor commented Dec 14, 2018

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
Jest tests failing with react-transition-group.

 "Error: Uncaught [TypeError: element.setAttribute is not a function]
    +     at reportException (Z:\\Aria\\honolulu-client\\node_modules\\jsdom\\lib\\jsdom\\living\\helpers\\runtime-script-errors.js:66:24)
    +     at invokeEventListeners (Z:\\Aria\\honolulu-client\\node_modules\\jsdom\\lib\\jsdom\\living\\events\\EventTarget-impl.js:209:9)
    +     at HTMLUnknownElementImpl._dispatch (Z:\\Aria\\honolulu-client\\node_modules\\jsdom\\lib\\jsdom\\living\\events\\EventTarget-impl.js:119:9)
    +     at HTMLUnknownElementImpl.dispatchEvent (Z:\\Aria\\honolulu-client\\node_modules\\jsdom\\lib\\jsdom\\living\\events\\EventTarget-impl.js:82:17)
    +     at HTMLUnknownElementImpl.dispatchEvent (Z:\\Aria\\honolulu-client\\node_modules\\jsdom\\lib\\jsdom\\living\\nodes\\HTMLElement-impl.js:30:27)
    +     at HTMLUnknownElement.dispatchEvent (Z:\\Aria\\honolulu-client\\node_modules\\jsdom\\lib\\jsdom\\living\\generated\\EventTarget.js:157:21)
    +     at Object.invokeGuardedCallbackDev (Z:\\Aria\\honolulu-client\\node_modules\\react-test-renderer\\cjs\\react-test-renderer.development.js:2381:16)
    +     at invokeGuardedCallback (Z:\\Aria\\honolulu-client\\node_modules\\react-test-renderer\\cjs\\react-test-renderer.development.js:2434:31)
    +     at commitRoot (Z:\\Aria\\honolulu-client\\node_modules\\react-test-renderer\\cjs\\react-test-renderer.development.js:9779:7)
    +     at completeRoot (Z:\\Aria\\honolulu-client\\node_modules\\react-test-renderer\\cjs\\react-test-renderer.development.js:11210:3)",
    +     [TypeError: element.setAttribute is not a function],
    +   ],
    +   Array [
    +     "The above error occurred in the <Transition> component:
    +     in Transition (created by CSSTransition)
    +     in CSSTransition
    +     in div (created by TransitionGroup)
    +     in TransitionGroup
    +     in div
    +     in div
    +     in Unknown (created by Context.Consumer)
    +     in Styled
    +     in Unknown
    +     in Router (created by MemoryRouter)
    +     in MemoryRouter

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React.
Here's a minimal demo of my code: https://codesandbox.io/s/4RAqrkRkn
Everything runs fine in the browser, but when running my Jest tests, I get the above error.

What is the expected behavior?
Getting a node similar to the following. This comes from another test for a component which users Router, but not react-transition-group.

ReactTestInstance {
        _fiber:
         FiberNode {
           tag: 1,
           key: null,
           elementType: { [Function: MemoryRouter] propTypes: [Object] },
           type: { [Function: MemoryRouter] propTypes: [Object] },
           stateNode:
            MemoryRouter {
              props: [Object],
              context: {},
              refs: {},
              updater: [Object],
              history: [Object],
              _reactInternalFiber: [Circular],
              _reactInternalInstance: {},
              state: null },
           return:
            FiberNode {
              tag: 3,

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-transition-group": "2.5.1",
"@types/react-transition-group": "^2.0.14",

@axe-z
Copy link

axe-z commented Jan 5, 2019

got the same thing, on first trying a link, works after a reload...
removeClass.js:8 Uncaught TypeError: element.setAttribute is not a function
at removeClass (removeClass.js:8)
at CSSTransition.js:81
at Array.forEach ()
at removeClass (CSSTransition.js:80)
at CSSTransition.removeClasses (CSSTransition.js:308)
at Object.CSSTransition._this.onEnter (CSSTransition.js:213)
at Transition.performEnter (Transition.js:335)
at Transition.updateStatus (Transition.js:307)
at Transition.componentDidMount (Transition.js:250)
at commitLifeCycles (react-dom.development.js:16998)
at commitAllLifeCycles (react-dom.development.js:18512)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at commitRoot (react-dom.development.js:18717)
at completeRoot (react-dom.development.js:20247)
at performWorkOnRoot (react-dom.development.js:20170)
at performWork (react-dom.development.js:20075)
at performSyncWork (react-dom.development.js:20049)
at interactiveUpdates$1 (react-dom.development.js:20337)
at interactiveUpdates (react-dom.development.js:2267)
at dispatchInteractiveEvent (react-dom.development.js:5083)

"apollo-boost": "^0.1.23",
"graphql": "^14.0.2",
"node-sass": "^4.11.0",
"react": "16.7.0",
"react-apollo": "^2.3.3",
"react-dom": "16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.3",
"react-transition-group": "^2.5.2"

@silvenon
Copy link
Collaborator

What does your test look like? I can't seem to find it in the CodeSandbox example.

@lizzzp1
Copy link

lizzzp1 commented Feb 28, 2019

Not sure if it's helpful, but I had the same error and was able to fix it by mocking react-transition-group with jest

@silvenon
Copy link
Collaborator

silvenon commented Mar 5, 2019

Any test examples where this error pops up?

@axe-z
Copy link

axe-z commented Mar 7, 2019

a wrapper div around the component helped.

@alicederyn
Copy link

The problem seems to stem from using the deprecated findDOMNode in Transition.js, which ReactTestRenderer is publicly committed to not supporting. The "node" it returns does not work with the dom-helpers library.

@alicederyn
Copy link

@jquense @eps1lon This may be relevant to discussion on #457 about the priority of replacing findDOMNode? Assuming I've diagnosed the situation correctly.

@alicederyn
Copy link

In case anyone else hits the issue and wants a workaround, like those above I mocked out part of the library by adding the following to my Jest setup file:

import React from 'react';
const reactTransitionGroup = jest.requireActual('react-transition-group');
reactTransitionGroup.CSSTransition = ({ children }) => {
  return <>
    {children}
  </>;
};
jest.setMock('react-transition-group', reactTransitionGroup);

Love to know what others did.

@eps1lon
Copy link
Collaborator

eps1lon commented Apr 5, 2019

@alicederyn I'm missing a reproducible example. The codesandbox in the initial post does not include any tests (among other issues like mismatching versions between post and package.json). I'm not familiar with ReactTestRenderer so without code I could only guess.

@timurcatakli
Copy link

@alicederyn your suggestion works but I am getting the following warning

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

@earthday
Copy link

earthday commented Sep 2, 2019

@timurcatakli @alicederyn Any updates about this warning? How to remove this warning?
Thanks in advance.

@linkej-autodesk
Copy link

I could fix this warning by calling children, i.e. rendering {children()} in @alicederyn's mock.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants