Add support for shallow rendering

[ilyvion]

Shallow rendering is very useful for unit testing components in isolation. You can read React's documentation on it to get a better sense of what exactly it is, but a quick explanation is that it renders the component, but not any child components. In other words, if component Foo's rendering is

html! {
    <div>
        <span>Hello World!</span>
        <Bar baz="qux" />
    </div>
}

then a shallow render would output

<div>
    <span>Hello World!</span>
    <Bar baz="qux" />
</div>

Questionnaire

• I'm interested in implementing this myself but don't know where to start
• I would like to add this feature
• I don't have time to add this right now, but maybe later

[jstarry]

Thanks @alexschrod! This sounds really useful and I appreciate your interest in implementing it yourself!

I would start by describing what you think the API would look like so we can agree on that before implementation.

When you get to the implementation, here are some tips:

• VComp::apply is where component nodes are reconciled .
• Scope::mount_in_place is where we queue tasks for component creation and rendering

[ilyvion]

I had written a bunch of stuff here, but Windows decided to pull the rug from under me and reboot due to an overnight Windows update, causing it all to go *poof*!

The gist of it was that I think we should try to emulate Enzyme's shallow API as closely as possible, while sticking to Rust idioms over JS ones, obviously.

[felipesere]

Maybe React-Testing-Library can provide some inspiration? https://testing-library.com/docs/react-testing-library/api
In a different issue I saw a mention of yew-testing as a crate. Is that a thing?

I'm curious what a minimal set of steps would be to get something to render, maybe just into a string for comparison?

[teymour-aldridge]

It probably could :D

I'm currently writing wayyyyy to many Yew-related crates, so I might pick up writing a testing library as well.

In terms of testing I have an example for how to do something that works right now in the broad area of testing – https://github.com/lovelace-ed/lovelace/blob/main/utils/malvolio/tests/test_yew_rendering.rs. No shallow rendering support atm, but I would imagine that one would stick something behind a #[cfg(test)] attribute and then just not render child components at test time.