Cannot set property 'font' of undefined

[rgevorgyan-vineti]

Hey there, Thanks for the library, it's great.

However, I have this issue when testing the <Truncate /> component with jest and enzyme. When I use width prop the tests fail saying:

console.error node_modules/jest-prop-type-error/index.js:8
    The above error occurred in the <Truncate> component:
        in Truncate (at completion_date.js:41)
        in div (at completion_date.js:40)
        in div (at completion_date.js:38)
        in CompletionDate (at completion_date.spec.js:24)
        in Provider (created by WrapperComponent)
        in WrapperComponent

    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-prop-type-error/index.js:8
    Error: Uncaught [TypeError: Cannot set property 'font' of undefined]
        at reportException (/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:18948:7)
        at node_modules/react-dom/cjs/react-dom.development.js:20418:5 TypeError: Cannot set property 'font' of undefined
        at Truncate.calcTargetWidth (node_modules/react-truncate/lib/Truncate.CommonJS.js:182:32)
        at Truncate.componentDidMount (node_modules/react-truncate/lib/Truncate.CommonJS.js:76:13)
        at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:17334:22)
        at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:18736:7)
        at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:149:14)
        at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:18948:7)
        at node_modules/react-dom/cjs/react-dom.development.js:20418:5
        at Object.unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:255:12)
        at completeRoot (node_modules/react-dom/cjs/react-dom.development.js:20417:13)
        at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:20346:9)
        at requestWork (node_modules/react-dom/cjs/react-dom.development.js:20090:7)
        at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:19911:5)
        at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:20572:3)
        at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:20600:10)
        at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:20657:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:20953:3)
        at node_modules/react-dom/cjs/react-dom.development.js:21090:14
        at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:20454:14)
        at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:21086:5)
        at Object.render (node_modules/react-dom/cjs/react-dom.development.js:21155:12)
        at render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:378:26)
        at fn (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:305:37)
        at Object.batchedUpdates$1 [as unstable_batchedUpdates] (node_modules/react-dom/cjs/react-dom.development.js:20439:12)
        at Object.act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1161:27)
        at act (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:305:13)
        at Object.wrapAct [as render] (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:364:16)
        at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:134:16)
        at mount (node_modules/enzyme/build/mount.js:21:10)
        at subject (src/components/ost/completion_date/completion_date.spec.js:24:5)
        at Object.subject (src/components/ost/completion_date/completion_date.spec.js:109:19)
        at Object.asyncJestLifecycle (node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at resolve (node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at process._tickCallback (internal/process/next_tick.js:68:7)

I've searched through the issues and someone suggested importing jest-mock-canvas, which I did, but it does not help.

The one thing I've found out is that the first test always passes and the other tests fail. Basically some issue with component mount. Anyone has some insight on this?

[michaelrodov]

+1 Same here, cannot properly test components that use <Truncate>

[sharanya5]

+1 Same here except that tests pass when run locally, but failing with the same error when the tests are through CI/CD.

[WORLDI]

+1