Unit test fails

[mhimaz]

Unit test fails on my component which uses TextTruncate library. I try to mount my component using enzyme and got the following error.

`TypeError: Cannot set property 'font' of null

  at TextTruncate.componentDidMount (node_modules/react-text-truncate/lib/index.js:135:26)
  at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:15255:22)
  at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:16523: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:219:27)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
  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:16677:7)
  at completeRoot (node_modules/react-dom/cjs/react-dom.development.js:18069:3)
  at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:17997:9)
  at performWork (node_modules/react-dom/cjs/react-dom.development.js:17901:7)
  at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:17873:3)
  at requestWork (node_modules/react-dom/cjs/react-dom.development.js:17761:5)
  at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:17566:5)
  at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:18240:3)
  at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:18267:10)
  at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:18324:10)
  at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:18586:3)
  at node_modules/react-dom/cjs/react-dom.development.js:18726:14
  at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:18124:10)
  at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:18722:5)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:18783:12)
  at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:348:114)
  at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:130:16)
  at mount (node_modules/enzyme/build/mount.js:21:10)
  at Object.it (src/app/v2/shared/sortableList/__tests__/test.js:66:43)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:189:7)`

also the snapshot test fails on my component when rendering using 'react-test-renderer'
const tree = renderer.create(<MyComponent { ...props } />).toJSON(); expect(tree).toMatchSnapshot();

this gives a different error message.
`TypeError: Cannot read property 'style' of null

  at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:371:20)
  at TextTruncate.componentDidMount (node_modules/react-text-truncate/lib/index.js:130:28)
  at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8272:22)
  at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9567:7)
  at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2331:14)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)`

[mhimaz]

@ShinyChang any idea what's the issue here? Any help to resolve this would be much appreciated.

[ShinyChang]

Hi @mhimaz , this is because jsdom does not implement window.getComputedStyle yet. That's why you faced this issue. Maybe you can mock getComputedStyle response and test it.

[mhimaz]

Thank you so much @ShinyChang!! let me try that and come back to you.

[brianchenault]

@mhimaz any luck with this? I've tried mocking getComputedStyled in my test setup, but no luck.

[raff-s]

this is how I solved the issue

  const createElement = document.createElement.bind(document);
  document.createElement = tagName => {
    const element = createElement(tagName);
    if (tagName === "canvas") {
      element.getContext = () => ({});
    }
    return element;
  };

[afsanefdaa]

this is how I solved the issue

  const createElement = document.createElement.bind(document);
  document.createElement = tagName => {
    const element = createElement(tagName);
    if (tagName === "canvas") {
      element.getContext = () => ({});
    }
    return element;
  };

Where should this code go? I mean I have the same problem and I'm using jest for unit testing but I didn't get how your solution could help me? It would be great if you could share the main component and the test file. Thank you

[raff-s]

Where should this code go? I mean I have the same problem and I'm using jest for unit testing but I didn't get how your solution could help me? It would be great if you could share the main component and the test file. Thank you

This should go on your beforeEach block.
That solution worked but in the end I was able to test the component without mounting it

[sebastiendan]

@RaffysWeb's solution didn't work for me so I merely mocked the Text-Truncate component in my unit tests:

jest.mock('react-text-truncate', () => {
  return ({ text }) => <div>{text}</div>
})