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

[isabelacmor]

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]

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]

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

[lizzzp1]

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]

Any test examples where this error pops up?

[axe-z]

a wrapper div around the component helped.

[alicederyn]

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]

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

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]

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

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

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

[linkej-autodesk]

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