pablosichert/react-truncate

Test failed with: Cannot set property 'font' of null

bipsBro opened this issue · 2 comments

bipsBro commented

I am trying to write a test for a component. when the value of width props is set, test get failed

// passed test

it('renders without crashing', () => {
  const div = document.createElement('div');

  ReactDOM.render(
     <Truncate  ellipsis="...">
      Lorem ipsum dolor sitelit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    </Truncate>,
    div,
  );
  ReactDOM.unmountComponentAtNode(div);
});

// failed test

it('renders without crashing', () => {
  const div = document.createElement('div');

  ReactDOM.render(
     <Truncate width={290}  ellipsis="...">
      Lorem ipsum dolor sitelit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    </Truncate>,
    div,
  );
  ReactDOM.unmountComponentAtNode(div);
});

this is the error message

TypeError: Cannot set property 'font' of null

  30 |   const div = document.createElement('div');
  31 | 
> 32 |   ReactDOM.render(
     |            ^
  33 |     <Truncate width={290}  ellipsis="...">
  34 |      Lorem ipsum dolor sitelit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  35 |       </Truncate>
  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:20049:22)
  at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:22813:7)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:347:14)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:397:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:454:31)
  at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:22585:9)
  at unstable_runWithPriority (node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:643:12)
  at runWithPriority$2 (node_modules/react-dom/cjs/react-dom.development.js:11305:10)
  at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:22414:3)
  at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21421:20)
  at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:24319:3)
  at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:24347:10)
  at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24436:10)
  at node_modules/react-dom/cjs/react-dom.development.js:24963:7
  at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21687:12)
  at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24962:5)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:25042:12)
  at Object.render (src/components/basket-overlay/index.test.tsx:32:12)
olaj commented

Same here, any fix or workaround?

rifont commented

The issue is that jsdom which is used by jest under the hood, does not support the canvas html element out of the box. The react-truncate library uses the canvas element to calculate and set the font width.

Installing the jest-canvas-mock package will add the missing support.

npm install -D jest-canvas-mock

Then create a new (or amend) ${rootDir}/src/setupTests.js with

import 'jest-canvas-mock';

This fixed the issue for me.

  • 👍5
  • 🚀2