pablosichert / react-truncate

React component for truncating multi-line spans and adding an ellipsis.
https://www.webpackbin.com/bins/-Kw6QnAkjmv1OD6Of-ZD
ISC License
587 stars 129 forks source link

ComponentWillUnmount ellipsis removal fails in test suites and other situations #128

Open kevinparkerson opened 4 years ago

kevinparkerson commented 4 years ago

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 commented 4 years ago

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

epidemian commented 3 years ago

@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. (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 :grin:

epidemian commented 3 years ago

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 :pensive:

epidemian commented 3 years ago

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 commented 2 years ago

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 :pray: