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

[bipsBro]

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]

Same here, any fix or workaround?

[rifont]

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.