question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Testing with visx imports renders empty div

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9

github_iconTop GitHub Comments

2reactions
EfosaSOcommented, Dec 8, 2020

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

1reaction
EfosaSOcommented, Dec 1, 2020

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

testing-library/react rendering empty <div /> for a redux toolkit ...
But it's just rendering the empty in the body tag. import React from 'react'; import configureMockStore from 'redux-mock-store'; import * as ...
Read more >
How to Write Your First Component Test in React + TypeScript ...
We need to test 3 things here: The name gets rendered in the p element with the correct text. The button doesn't get...
Read more >
Introduction to Visx - LogRocket Blog
Find out why Visx is the most stable and reliable visualization library you can use and learn how to create a bar chart...
Read more >
Testing library renders connected component as an empty ...
I imported my HOC, which connects my component to the redux store, but afterwards I saw in the console that it only rendered...
Read more >
How to test SVG Graphs - Sam Dawson
This article is walk-through of testing a React Bar Graph with Jest and ... import { wait, render, screen } from "@testing-library/react"; ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found