question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Menu component throws "TypeError: cannot set property width of undefined" in Jest snapshot tests

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.9.3

Environment

10.13.6, chrome 69.0.3497.100 (Official Build) (64-bit), “antd”: “^3.9.3”, “react”: “^16.5.2”,

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. run the jest snapshot test Running the jest snapshot test fails with the following error: TypeError: Cannot set property ‘width’ of undefined

What is expected?

The test should pass / show new snapshot

What is actually happening?

The test fails and produces this stacktrace:

      The above error occurred in the <DOMWrap> component:
          in DOMWrap (created by SubPopupMenu)
          in SubPopupMenu (created by Connect(SubPopupMenu))
          in Connect(SubPopupMenu) (created by Menu)
          in Provider (created by Menu)
          in Menu (created by Menu)
          in Menu (at App.jsx:23)
          in div (created by Basic)
          in Basic (created by Adapter)
          in Adapter (at App.jsx:19)
          in div (created by BasicLayout)
          in BasicLayout (created by Adapter)
          in Adapter (at App.jsx:18)
          in Router (created by BrowserRouter)
          in BrowserRouter (at App.jsx:17)
          in App (at App.spec.js:9)

      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  ● App Snapshot › renders

    TypeError: Cannot set property 'width' of undefined

      at DOMWrap._this.setChildrenWidthAndResize (node_modules/rc-menu/lib/DOMWrap.js:147:54)
      at DOMWrap.componentDidMount (node_modules/rc-menu/lib/DOMWrap.js:195:10)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7019:22)
      at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8234:7)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2312:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2362:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2411:31)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8404:7)
      at completeRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9769:3)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9697:9)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9601:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9573:3)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9461:5)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9256:5)
      at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9865:3)
      at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9892:10)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9903:10)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10428:5)
      at Object.test (src/test/__tests__/App.spec.js:8:51)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:189:7)```

---
As soon as I added the antd menu, these problems started. It looks like it might be related to how the component interacts with: 
/node_modules/rc-menu/lib/DOMWrap.js


<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
zombieJcommented, Oct 9, 2018

Hi @marina101 , rc component which antd deps on use some DOM native props. This means react-test-renderer can not handle that. If you want to test on this, pls use enzyme instead. You can ref follow sample:

1reaction
picodothcommented, Sep 30, 2018

rc-menu and antd are also tested with enzyme + jest, we didn’t see this kind of failure. My guess it’s not about Jest, but seems like react-test-renderer does not depend on jsdom, that’s why we’re seeing these issues. Is it easy for you to use enzyme + jest to testing for the related files?

Read more comments on GitHub >

github_iconTop Results From Across the Web

unit testing - Jest: Cannot set property ' ' of undefined (Angular)
unit testing - Jest: Cannot set property ' ' of undefined (Angular) - Stack Overflow. Stack Overflow for Teams – Start collaborating and ......
Read more >
API | React Native Testing Library - Open Source
This experimental option allows you to replicate React Native behavior of throwing Invariant Violation: Text strings must be rendered within a <Text> component...
Read more >
The React Handbook – Learn React for Beginners
The props.children property allows you to inject components inside other components. The component needs to output props.children in its JSX:
Read more >
Top 18 Most Common AngularJS Developer Mistakes - Toptal
Sheer size of the AngularJS can easily lead to many mistakes. In this article you will learn about most common AngularJS developer mistakes...
Read more >
cannot read property 'addeventlistener' of null jest - You.com
import React from 'react'; import { Slider } from '@material-ui/core'; import renderer from 'react-test-renderer'; jest.mock('react-dom', () => ({ // the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found