DEGJS / storybook-addon-taffy

A responsive viewport addon for Storybook
15 stars 3 forks source link

TypeError: Cannot read property 'getBoundingClientRect' of null #2

Open papabear opened 4 years ago

papabear commented 4 years ago

I'm using StoryShots and when I have Taffy configured npm test fails with the following error.


  ● Storyshots › components/Two Column with Image › Two Col Image Right

    TypeError: Cannot read property 'getBoundingClientRect' of null

      at node_modules/@degjs/storybook-addon-taffy/dist/index.js:55:40
      at commitHookEffectList (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12145:26)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12195:9)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15354:7)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11758:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11807:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11860:31)
      at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15092:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:697:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14932:3)
      at finishSyncRender (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14439:3)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14417:9)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2063:24
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:697:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
      at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2058:7)
      at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2046:3)
      at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13819:9)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17037:3)
      at create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17777:5)
      at getRenderedTree (node_modules/@storybook/addon-storyshots/dist/frameworks/react/renderTree.js:23:16)
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:10:22
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:42:20)
  console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'getBoundingClientRect' of null]
        at reportException (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
        at innerInvokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:332:9)
        at invokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
        at HTMLUnknownElementImpl._dispatch (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
        at HTMLUnknownElement.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
        at Object.invokeGuardedCallbackDev (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11807:16)
        at invokeGuardedCallback (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11860:31)
        at commitRootImpl (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15092:9)
        at unstable_runWithPriority (/Users/jswink/src/paul/node_modules/scheduler/cjs/scheduler.development.js:697:12) TypeError: Cannot read property 'getBoundingClientRect' of null
        at /Users/jswink/src/paul/node_modules/@degjs/storybook-addon-taffy/dist/index.js:55:40
        at commitHookEffectList (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12145:26)
        at commitLifeCycles (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12195:9)
        at commitLayoutEffects (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15354:7)
        at HTMLUnknownElement.callCallback (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11758:14)
        at innerInvokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:316:27)
        at invokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
        at HTMLUnknownElementImpl._dispatch (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
        at HTMLUnknownElement.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
        at Object.invokeGuardedCallbackDev (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11807:16)
        at invokeGuardedCallback (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11860:31)
        at commitRootImpl (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15092:9)
        at unstable_runWithPriority (/Users/jswink/src/paul/node_modules/scheduler/cjs/scheduler.development.js:697:12)
        at runWithPriority (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
        at commitRoot (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14932:3)
        at finishSyncRender (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14439:3)
        at performSyncWorkOnRoot (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14417:9)
        at /Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2063:24
        at unstable_runWithPriority (/Users/jswink/src/paul/node_modules/scheduler/cjs/scheduler.development.js:697:12)
        at runWithPriority (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
        at flushSyncCallbackQueueImpl (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2058:7)
        at flushSyncCallbackQueue (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2046:3)
        at scheduleUpdateOnFiber (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13819:9)
        at updateContainer (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17037:3)
        at create (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17777:5)
        at getRenderedTree (/Users/jswink/src/paul/node_modules/@storybook/addon-storyshots/dist/frameworks/react/renderTree.js:23:16)
        at /Users/jswink/src/paul/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:10:22
        at Object.<anonymous> (/Users/jswink/src/paul/node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:42:20)
        at Object.asyncJestTest (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:100:37)
        at resolve (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at process._tickCallback (internal/process/next_tick.js:68:7)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11958
    The above error occurred in the <TaffyWrapper> component:
        in TaffyWrapper

    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.

  console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'getBoundingClientRect' of null]
        at reportException (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
        at innerInvokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:332:9)
        at invokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
        at HTMLUnknownElementImpl._dispatch (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
        at HTMLUnknownElement.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
        at Object.invokeGuardedCallbackDev (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11807:16)
        at invokeGuardedCallback (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11860:31)
        at commitRootImpl (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15092:9)
        at unstable_runWithPriority (/Users/jswink/src/paul/node_modules/scheduler/cjs/scheduler.development.js:697:12) TypeError: Cannot read property 'getBoundingClientRect' of null
        at /Users/jswink/src/paul/node_modules/@degjs/storybook-addon-taffy/dist/index.js:55:40
        at commitHookEffectList (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12145:26)
        at commitLifeCycles (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12195:9)
        at commitLayoutEffects (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15354:7)
        at HTMLUnknownElement.callCallback (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11758:14)
        at innerInvokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:316:27)
        at invokeEventListeners (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
        at HTMLUnknownElementImpl._dispatch (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
        at HTMLUnknownElement.dispatchEvent (/Users/jswink/src/paul/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
        at Object.invokeGuardedCallbackDev (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11807:16)
        at invokeGuardedCallback (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11860:31)
        at commitRootImpl (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15092:9)
        at unstable_runWithPriority (/Users/jswink/src/paul/node_modules/scheduler/cjs/scheduler.development.js:697:12)
        at runWithPriority (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
        at commitRoot (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14932:3)
        at finishSyncRender (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14439:3)
        at performSyncWorkOnRoot (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14417:9)
        at /Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2063:24
        at unstable_runWithPriority (/Users/jswink/src/paul/node_modules/scheduler/cjs/scheduler.development.js:697:12)
        at runWithPriority (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
        at flushSyncCallbackQueueImpl (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2058:7)
        at flushSyncCallbackQueue (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2046:3)
        at scheduleUpdateOnFiber (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13819:9)
        at updateContainer (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17037:3)
        at create (/Users/jswink/src/paul/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17777:5)
        at getRenderedTree (/Users/jswink/src/paul/node_modules/@storybook/addon-storyshots/dist/frameworks/react/renderTree.js:23:16)
        at /Users/jswink/src/paul/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:10:22
        at Object.<anonymous> (/Users/jswink/src/paul/node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:42:20)
        at Object.asyncJestTest (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:100:37)
        at resolve (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/Users/jswink/src/paul/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at process._tickCallback (internal/process/next_tick.js:68:7)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11958
    The above error occurred in the <TaffyWrapper> component:
        in TaffyWrapper

    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.

I didn't see anywhere to request support, so I apologize if this is the wrong forum.

aladage commented 4 years ago

This is fine, thanks for reporting the issue! I wasn't able to reproduce the exact issue, but I've added an additional check for the element before using getBoundingClientRect on it that should at least prevent the error from occurring. Can you please update to 1.0.4 and let me know if that helps?

papabear commented 4 years ago

Updated and the original error is no longer present, however I'm getting a new one:

 ● Storyshots › components/Two Column with Image › Two Col Image Left

    expect(received).toMatchSnapshot()

    Snapshot name: `Storyshots components/Two Column with Image Two Col Image Left 1`

    - Snapshot  -  0
    + Received  + 50

    @@ -1,6 +1,33 @@
      <div
    +   style={
    +     Object {
    +       "paddingRight": "14px",
    +     }
    +   }
    + >
    +   <div
    +     style={
    +       Object {
    +         "backgroundColor": "#fff",
    +         "boxSizing": "border-box",
    +         "flexShrink": 0,
    +         "height": "100%",
    +         "left": "50%",
    +         "maxHeight": undefined,
    +         "maxWidth": undefined,
    +         "minHeight": undefined,
    +         "minWidth": undefined,
    +         "position": "relative",
    +         "transform": "translateX(-50%)",
    +         "userSelect": "auto",
    +         "width": "100%",
    +       }
    +     }
    +   >
    +     <div>
    +       <div