React-transition-group: TypeError: element.setAttribute is not a function The above error occurred in the <Transition> component

Created on 14 Dec 2018 · 12Comments · Source: reactjs/react-transition-group

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

Source

isabelacmor

👍6

Most helpful comment

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.

alicederyn on 5 Apr 2019

👍4

All 12 comments

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"

axe-z on 5 Jan 2019

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

silvenon on 19 Feb 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

lizzzp1 on 28 Feb 2019

Any test examples where this error pops up?

silvenon on 5 Mar 2019

a wrapper div around the component helped.

axe-z on 7 Mar 2019

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 on 5 Apr 2019

@jquense @eps1lon This may be relevant to discussion on https://github.com/reactjs/react-transition-group/pull/457 about the priority of replacing findDOMNode? Assuming I've diagnosed the situation correctly.

alicederyn on 5 Apr 2019

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.

alicederyn on 5 Apr 2019

👍4

@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.

eps1lon on 5 Apr 2019

@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.