How do you write tests for components using react-sizeme?

[jeznag]

I'm using react-sizeme within create-react-app and am trying to write tests using jest.

When I try and do a snapshot test, this is the JSON.

{ type: 'div',
      props: { style: { width: '100%', height: '100%' } },
      children: null }

How can I write tests that wait until the initial sizing render has finished? Would also be helpful to see how people write tests that adjust to different viewport widths (see unanswered question: https://stackoverflow.com/questions/46221210/jest-enzyme-how-to-test-at-different-viewports)

[nunofmaia]

I have the same problem. The children are not rendered yet so the snapshot is not really that useful. Currently, I'm setting noPlaceholder to true only when running the tests. I'm using this library with react-grid-layout and we can still find some oddities like style="height: 150px; position: absolute; transform: translate(NaNpx,0px);" in the snapshots, but that's better than an empty div I guess. 💭

It would be great to have a solution to this issue.

[kaitmore]

I have the following code in my jest setup file so it's configured globally and only effects the test environment:

import sizeMe from "react-sizeme";

sizeMe.noPlaceholders = true;

[ctrlplusb]

Good tip @kaitmore - we should add this to the docs.

[scottdickerson]

I am using a library that's using sizeme, and unfortunately it doesn't seem to be picking up the noPlaceholders global if I try and set it in my setupTests.js. Any ideas?

[spiritwalker-jiang]

thanks @kaitmore, works like a charm.

[spiritwalker-jiang]

@scottdickerson , I'm not using react-sizeme directly either, it is loaded through another component. And I don't have such a problem. Maybe the lib you're using gets loaded first before you test kicks in; therefore it is too late to set the global flag? just guess

[rumeshwick]

@scottdickerson check where your application's sizeme version and the library's sizeme version is the same. If not sizeMe.noPlaceholders = true; will not work. I also ran in to the same problem and after updating the version in to a one version, issue got fixed.

[keul]

Workaround from @kaitmore should be added to the documentation.