Visx: Testing with visx imports renders empty div

[EfosaSO]

When testing using @testing-library/react it renders a div like so:

<div style="width: 100%; height: 100%;" />

I thought it might be a resizing issue as the component is wrapped with a withParentSize hoc and when I remove that it complains about needing a Resize-observer polyfill

Error: Uncaught [Error: This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills]

Haven't found anything on the net about testing components with visx

[williaster]

Hey @EfosaSO 👋 thanks for checking out visx. Can you link to or provide more code examples for what you are rendering in your tests?

visx is just react, so there is nothing "special" about testing it versus normal react (we use enzyme currently for our tests, but react-testing-lib works fine assuming you have the needed polyfills [which depend on components you are using]). What you are seeing is do to how the components you are using work.

withParentSize wraps your component in a div in order to measure the parent's container size using a ref (that's the div you are seeing). if your component never mounts, or if getBoundingClientRect is not mocked out in your testing environmemt (e.g., jsdom), it will never render its children and so that may be why you are just seeing a div. You could also try ParentSize instead of the HOC as it should always render its children.

withParentSize (and ParentSize) also currently import a global polyfill for ResizeObserver, so when you remove it you no longer get that polyfill. It looks like you are getting an error from react-use-measure which likely means you are using @visx/tooltip or /annotation which use that library. Both of the readmes for those packages specify that they have a dependency on ResizeObserver, and so you must either pass the polyfill yourself, or import one globally (as the @visx/responsive components do).

[EfosaSO]

@williaster thanks for that thorough explanation. I will first try your solutions and report back with a link to my implementation if I run into issues.

[EfosaSO]

@williaster switching to ParentSize solves the issue once you add a ResizeObserver pollyfill

[williaster]

Glad to hear! Going to close this for now, feel free to re-open if you have any further questions/problems!