ComponentWillUnmount ellipsis removal fails in test suites and other situations

[kevinparkerson]

In ComponentWillUnmount, this.ellipsis and this.ellipsis.parentNode need to be checked for before attempting removal so that it does not fail in test suites or other situations where it no longer exists. I will submit a PR for this simple fix shortly.

[pablosichert]

I'll reopen this issue, since closing was done automatically, but no release has been published yet.

[epidemian]

@pablosichert i stumbled upon this same issue when using this component on a Storyshot/Jest test. The stacktrace has a bunch of JSDOM on it, so maybe it's due to a difference between that and real browsers.

Deep unhelpful stacktrace

    TypeError: Cannot read property 'parentNode' of null

      at Truncate.componentWillUnmount (node_modules/react-truncate/lib/Truncate.CommonJS.js:106:22)
      at callComponentWillUnmountWithTimer (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11532:14)
      at HTMLUnknownElement.callCallback (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
      at invokeGuardedCallback (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
      at safelyCallComponentWillUnmount (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11539:5)
      at commitUnmount (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12068:11)
      at commitNestedUnmounts (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12121:5)
      at unmountHostComponents (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12405:7)
      at commitDeletion (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12462:5)
      at commitMutationEffects (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14424:11)
      at HTMLUnknownElement.callCallback (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
      at invokeGuardedCallback (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
      at commitRootImpl (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14142:9)
      at unstable_runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
      at commitRoot (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14011:3)
      at performSyncWorkOnRoot (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13440:3)
      at node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
      at unstable_runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
      at flushSyncCallbackQueueImpl (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
      at flushSyncCallbackQueue (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
      at scheduleUpdateOnFiber (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13004:9)
      at updateContainer (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16454:3)
      at Object.unmount (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17211:7)
      at match (node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:28:22)
      at node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:34:16
      at node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:43:44
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/snapshotsTestsTemplate.js:43:20)

I'll probably pin my dependency to current master to get the fix, but a patch release with that fix would be awesome too :)

Thanks for awesome library! it saved me quite some headaches fighting with -webkit-line-clamp CSS property 😁

[epidemian]

I'll probably pin my dependency to current master to get the fix

Talked too soon. Couldn't pin the dependency to a github commit because it's not a release and so it does not include the lib/ directory and the main entry point fails 😔

[epidemian]

I monkey-patching the Truncate library momentarily until a fix is released, to stop these error on the test suite. If it might help others, here's the terribly ugly code i used:

if (typeof jest !== 'undefined') {
  const originalWillUnmount = Truncate.prototype.componentWillUnmount

  Truncate.prototype.componentWillUnmount = function () {
    if (!this.elements.ellipsis) {
      this.elements.ellipsis = { parentNode: { removeChild() {} } }
    }
    originalWillUnmount?.call(this)
  }
}

[e0ipso]

I am running into this as well. Any chance we can get a release that includes this fix? Many thanks for your work on this project 🙏