Skip to content

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

Open
@isabelacmor

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions