Shallow rendering

[dannystommen]

Hi,

I'm looking for the current status on Shallow rendering.

According to https://bunit.dev/docs/test-doubles/shallow-rendering.html it's still in progress and not out yet.

I can also see that half a year ago a question was asked to test it out:
#401
In this topic it sounds like Shallow rendering was part op the 1.2 release.

I'm using 1.2.49 version now. If it's now out yet, is there any ETA?

Thanks,
Danny

[egil]

Hi Danny,

It was part of 1.2.x-preview but was rolled back due to some corner cases that required the solution to be something different.

However, there is something very similar, that might offer the functionality you need. Its not yet documented, but I did discuss it with Hassan and Brian on their show yesterday. If you jump to around 1:25 in the video, you will get a quick intro to it: https://www.youtube.com/watch?v=2xvnF8Qu8MQ

[egil]

Also, if you have any suggestions for improvements to the built in stub, please add them here: #526

[dannystommen]

I did manage to get it work, but for me personally, it's not ideal.

First, because when having multiple (or a lot of) smaller components within one component, you need to add a lot of stubs.
Secondly, because I need to change the FindComponent call. Where it's now FindComponents<MyComponent>();, I need to change this to FindComponents<Stub<MyComponent>>();.

Currently I coming from React/Jest/Enzyme using shallow (and really occiosional mount). And I think shallow solves both of the above issues.

[egil]

I did manage to get it work, but for me personally, it's not ideal.

First, because when having multiple (or a lot of) smaller components within one component, you need to add a lot of stubs.

Try AddStub(x => x.Name != "name of component under test") to stub all but the component under test

Secondly, because I need to change the FindComponent call. Where it's now FindComponents<MyComponent>();, I need to change this to FindComponents<Stub<MyComponent>>();.

What is your use case for finding components that have been stubbed?

Currently I coming from React/Jest/Enzyme using shallow (and really occiosional mount). And I think shallow solves both of the above issues.

Yep, understand shallow render useful in general. What is it in particular you use it for during testing? What does it enable in your tests that doesn't otherwise work?

[dannystommen]

Suppose, I have a Table component. This retrieves data, and renders a 'Row' component for each item in the data.

For example:

• ClientTable retrieves clients (where this called is being mocked).
• test 1: check if the number of ClientRow components is equal to the number of clients.
• test 2: check if the correct data is being passed to the ClientRow component.

This migt not be the best example, because ClientRow probably doesn't retrieve any extra data (and hence it does not matter that much whether the ClientRow is stubbed or not.

[egil]

Ahh I see. I have actually written tests like that before in my walk through of the Blazing Pizza Workshop.

My approach is as follows:

• Write tests for the ClientRow component that verifies that it behaves as expected when it is passed a single data item.
• Write tests for the ClientTable component that verifies it behaves correctly according to the amount of data items being returned (zero, 1, more..). This depends on the logic of the table component, e.g. does it have sorting and filtering logic, etc.,
• Write a test for the ClientTable component that checks if N data items is passed to it, then N ClientRow component exists as children of it, AND that each ClientRow component has been passed the expected data item.

The last test could look something like this (im using FluentAssertions syntax here):

var items = new List<...>();

var cut = Render(@<ClientTable Items="items" />);

var rows = cut.FindComponents<ClientRow>();
var itemsPassToClientRows = rows.Select(x => x.Instance.Item);
itemsPassToClientRows.Should().BeEquivalentTo(items);

If you want to verify the HTML markup produced by the ClientTable without verifying the markup produced by ClientRow, then you can do something like this, using the semantic comparer built into bUnit.

var items = new List<...>();

var cut = Render(@<ClientTable Items="items" />);

cut.MarkupMatches(
 @<table>
    <thead> ... add expected table header info here </thead>
    <tbody diff:ignore></tbody>
    <tfoot> ... add expected table footerinfo here </tfoot>  
  </table>);

The diff:ignoreChildren comparison modifier tells the comparer to simply ignore the <tbody> element and any child elements inside. There are many more modifiers that you can read about here: https://bunit.dev/docs/verification/semantic-html-comparison.html

The semantic comparer in bUnit is something I believe is pretty unique to frontend testing. As far as I know, its not something that is available in React/Jest/Enzyme, and it does make it does compensate for not having shallow rendering. The component factories/stub feature is very useful when you have 3rd party components inside your components that you do not want to test, because they are hard to get working in a testing context, or because they are simply not relevant in a specific test.

Hope this helps.

[egil]

Just realized, that you can of course get very close to shallow rendering by doing this:

ComponentFactories.AddStub(x => x != typeof(ComponentUnderTest));
var cut = RenderComponent<ComponentUnderTest>();  

This will stub out all components except for the ComponentUnderTest. There are corner cases where this falls down, like what if the ComponentUnderTest has itself as a child, but this will probably work in most cases for you.

You could even put it into an extension method on TestContextBase and call it ShallowRender<T>, e.g.:

public static IRenderedComponent<T> ShallowRender<T>(this TestContextBase ctx)
{
  ctx.ComponentFactories.AddStub(x => x != typeof(T));
  return ctx.RenderComponent<T>();
}