How to find components in children, using enzyme?

[matneyx]

I'm trying to incorporate react-measure in an existing project, using it to measure the width of a modal so I can pass in the modal width and set the width of my fixed-data-table-2 Table (I'm yanking out fixed-data-table and responsive-fixed-data-table).

Functionally, everything works, but my tests are broken because enzyme can't find Modal.Title anymore... It can find Modal, but even with mount, anything inside the Modal seems unaccessable.

Have any of you run into this? Do you have a solution? Thanks.

[souporserious]

Hmm weird 🤔 I'm not familiar with testing in enzyme. What version are you using?

[matneyx]

"react-measure": "2.0.2",
"enzyme": "^2.8.2"

[matneyx]

Obviously, I don't want to change testing libraries for a single component, but is there a testing library that you use that can find child components inside Measure?

[souporserious]

Definitely, I feel you. Unfortunately, I'm not too savvy with testing. I've only done a little bit, I really need to get better about it. I'll leave this open though so someone can hopefully help. Maybe there is a pattern for testing render props or HoCs with enzyme 🤔. I'll try and do some research.

[TrySound]

@matneyx I'm sure it's trivial since render prop allows you to render anything.

const inst = mount(
  <Viewport>
    {({ width }) => (
      <div className="myElement" width={width}></div>
    )}
  </Viewport>
)
const myElement = inst.find('.myElement')
// ....

[TrySound]

Try with simple example, it's probably not react-measure problem.

[VladimirKhil]

Btw, is there a way to mock parameters "width" and "height" provided to child div by react-measure?

[matneyx]

I was able to get my tests to work by moving Measure further into the component (the last div surrounding my fixed-data-table). I'm still not positive that I could get inside a react-bootstrap Modal, but I think that's more to do with how Modal is rendered and nothing to do with Measure.

Thanks for all your input.