wojtekmaj/react-fit

`<Fit />'s child needed to have its height decreased to 0px` console warning in tests

Closed this issue · 2 comments

pjg commented

I'm using react-date-picker and while executing jest tests for components wrapping react-date-picker I see a lot of console warnings like this:

console.warn
  <Fit />'s child needed to have its height decreased to 0px

      at consoleOnDev (node_modules/react-fit/dist/umd/shared/utils.js:23:34)
      at warnOnDev (node_modules/react-fit/dist/umd/shared/utils.js:32:23)
      at shrinkToSize (node_modules/react-fit/dist/umd/Fit.js:161:28)
      at displayWhereverShrinkedFits (node_modules/react-fit/dist/umd/Fit.js:169:7)
      at alignAxis (node_modules/react-fit/dist/umd/Fit.js:183:5)
      at alignMainAxis (node_modules/react-fit/dist/umd/Fit.js:188:3)
      at alignBothAxis (node_modules/react-fit/dist/umd/Fit.js:203:3)

While I understand that those warnings might be important in the context of a browser, I don't find them to be useful when executed in the context of a node process.

Is there a way to silence them?

wojtekmaj commented

You could

jest.mock('react-fit', () => function Fit(children) { return children; });

I guess, but I agree it would be nice to silence these warnings in Jest.

  • 👍1
pjg commented

Thanks for the tip, although your suggestion does not work well as it produces the following error:

Error: Uncaught [Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.]

    The above error occurred in the <Fit> component:
    
        at Fit
        at div
        at DatePicker (node_modules/react-date-picker/dist/DatePicker.js:84:5)
        at div

However, mocking the whole module does the trick:

jest.mock('react-fit')

or something like this:

jest.mock('react-fit', () => ({
  __esModule: true,
  default: jest.fn(() => 'default'),
}))
  • 👍2