Handy debug tips about preact-render-spy HOT 4 OPEN

In your usecase, the document fragment we use is stored in context.fragment this should be what you are looking for.

It's undocumented, but that could change.

One thing, with a shallow render, any component/stateless function children will not have any representation in the DOM, we replace them with null nodes during the render, so you won't have any representation of those children in the DOM iteself.

try some of these and let me know if we already have the solution but just need some documentation:

const context = shallow(<Testable />);
console.log(context.fragment);
// we also have our own toString that does a shallow render:
console.log(context.toString());
// if using jest you could even use our snapshot plugin (read docs)
expect(context).toMatchSnapshot();

from preact-render-spy.

@joshuataylor Since its preact. You could get the DOM with context.component().base. preact stores the component's dom element at the .base member. You could get the html as a string with context.component().base.outerHTML I think (or .innerHTML if you want that). That'll be up to the support of your DOM environment. (Testing with a browser through selenium, karma, etc, would obviously work. I'd figure jsdom should support that as well, but I don't personally know.)

I think the best place right now for tips like this would be in our examples section or in a related adjacent section.

from preact-render-spy.

Currently the noted techniques for what you are asking will work with stateful classes extending Component.

from preact-render-spy.

Sorry for the delay in getting back! Yes, context.fragment is perfect and returns what I need. Will see if I can write some documentation with my experiences, preact-render-spy makes things so much easier.

from preact-render-spy.