bUnit bUnit
Search Results for

    Show / Hide Table of Contents

    Passing parameters to components

    bUnit comes with a number of ways to pass parameters to components under test:

    1. In tests written in .razor files, passing parameters is most easily done with inside an inline Razor template passed to the Render method, although the parameter passing option available in tests written in C# files is also available here.

    2. In tests written in .cs files, bUnit includes a strongly typed builder. There are two methods in bUnit that allow passing parameters in C#-based test code:

      • RenderComponent method on the test context, which is used to render a component initially.
      • SetParametersAndRender method on a rendered component, which is used to pass new parameters to an already rendered component.

    In the following sub sections, we will show both .cs- and .razor-based test code; just click between them using the tabs.

    Note

    The examples below are written using xUnit, but the code is the same with NUnit and MSTest.

    In addition to this, the example tests explicitly instantiates the bUnit TestContext in each test. If your test class is inheriting from the TestContext as described in the section "Remove boilerplate code from tests" on the Writing tests for Blazor components page, then you should NOT instantiates the TestContext in your tests and skip that step.

    Regular parameters

    A regular parameter is one that is declared using the [Parameter] attribute. The following subsections will cover both non-Blazor type parameters, e.g. int and List<string>, and the special Blazor types like EventCallback and RenderFragment.

    Non-Blazor type parameters

    Let's look at an example of passing parameters that takes types which are not special to Blazor, i.e.:

    public class NonBlazorTypesParams : ComponentBase
    {
      [Parameter]
      public int Numbers { get; set; }
    
      [Parameter]
      public List<string> Lines { get; set; }
    }
    

    This can be done like this:

    • C# test code
    • Razor test code
    public class NonBlazorTypesParamsTest
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var lines = new List<string> { "Hello", "World" };
    
        var cut = ctx.RenderComponent<NonBlazorTypesParams>(parameters => parameters
          .Add(p => p.Numbers, 42)
          .Add(p => p.Lines, lines)
        );
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s Add method, which takes a parameter selector expression that selects the parameter using a lambda, and forces you to provide the correct type for the value. This makes the builder's methods strongly typed and refactor-safe.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var lines = new List<string> { "Hello", "World" };
    
        var cut = ctx.Render(@<NonBlazorTypesParams
                                  Numbers="42"
                                  Lines="lines" />);
      }
    }
    

    The example passes a inline Razor template to the Render() method. The parameters to the component is just passed like normal in Razor code.

    EventCallback parameters

    This example will pass parameters to the following two EventCallback parameters:

    public class EventCallbackParams : ComponentBase
    {
      [Parameter]
      public EventCallback<MouseEventArgs> OnClick { get; set; }
    
      [Parameter]
      public EventCallback OnSomething { get; set; }
    }
    

    This can be done like this:

    • C# test code
    • Razor test code
      public class EventCallbackParamsTest
      {
        [Fact]
        public void Test()
        {
          using var ctx = new TestContext();
    
          Action<MouseEventArgs> onClickHandler = _ => { };
          Action onSomethingHandler = () => { };
    
          var cut = ctx.RenderComponent<EventCallbackParams>(parameters => parameters
            .Add(p => p.OnClick, onClickHandler)
            .Add(p => p.OnSomething, onSomethingHandler)
          );
        }
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s Add method, which takes a parameter selector expression that selects the parameter using a lambda, and forces you to provide the correct type of callback method. This makes the builder's methods strongly typed and refactor-safe.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        Action<MouseEventArgs> onClickHandler = _ => { };
        Action onSomethingHandler = () => { };
    
        var cut = ctx.Render(@<EventCallbackParams
                                  OnClick="onClickHandler"
                                  OnSomething="onSomethingHandler" />);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The parameters to the component is just passed like normal in Razor code.

    ChildContent parameters

    The ChildContent parameter in Blazor is represented by a RenderFragment. In Blazor, this can be regular HTML markup, it can be Razor markup, e.g. other component declarations, or a mix of the two. If it is another component, then that component can also receive child content, and so forth.

    The following subsections have different examples of child content being passed to the following component:

    public class ChildContentParams : ComponentBase
    {
      [Parameter]
      public RenderFragment ChildContent { get; set; }
    }
    

    Passing HTML to the ChildContent parameter

    • C# test code
    • Razor test code
    public class ChildContentParams1Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<ChildContentParams>(parameters => parameters
          .AddChildContent("<h1>Hello World</h1>")
        );
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s AddChildContent method to pass an HTML markup string as the input to the ChildContent parameter.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<ChildContentParams>
                                <h1>Hello World</h1>
                              </ChildContentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some HTML markup, is just passed like normal in Razor code.

    Passing a component without parameters to the ChildContent parameter

    To pass a component, e.g. the classic <Counter> component, which does not take any parameters itself, to a ChildContent parameter, do the following:

    • C# test code
    • Razor test code
    public class ChildContentParams2Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<ChildContentParams>(parameters => parameters
          .AddChildContent<Counter>()
        );
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s AddChildContent<TChildComponent> method, where TChildComponent is the (child) component that should be passed to the component under test's ChildContent parameter.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<ChildContentParams>
                                <Counter />
                              </ChildContentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some Razor markup, is just passed like normal in Razor code.

    Passing a component with parameters to the ChildContent parameter

    To pass a component with parameters to a component under test, e.g. the <Alert> component with the following parameters, do the following:

    [Parameter] public string Heading { get; set; }
    [Parameter] public AlertType Type { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    
    • C# test code
    • Razor test code
    public class ChildContentParams3Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<ChildContentParams>(parameters => parameters
          .AddChildContent<Alert>(alertParameters => alertParameters
            .Add(p => p.Heading, "Alert heading")
            .Add(p => p.Type, AlertType.Warning)
            .AddChildContent("<p>Hello World</p>")
          )
        );
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s AddChildContent<TChildComponent> method, where TChildComponent is the (child) component that should be passed to the component under test. The AddChildContent<TChildComponent> method takes an optional ComponentParameterCollectionBuilder<TComponent> as input, which can be used to pass parameters to the TChildComponent component, which in this case is the <Alert> component.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<ChildContentParams>
                                <Alert Heading="Alert heading" [email protected]>
                                  <p>Hello World</p>
                                </Alert>
                              </ChildContentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some Razor markup, and parameters to the child component, is just passed like normal in Razor code.

    Passing a mix of Razor and HTML to a ChildContent parameter

    Some times you need to pass multiple different types of content to a ChildContent parameter, e.g. both some markup and a component. This can be done in the following way:

    • C# test code
    • Razor test code
    public class ChildContentParams4Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<ChildContentParams>(parameters => parameters
          .AddChildContent("<h1>Below you will find a most interesting alert!</h1>")
          .AddChildContent<Alert>(childParams => childParams
            .Add(p => p.Heading, "Alert heading")
            .Add(p => p.Type, AlertType.Warning)
            .AddChildContent("<p>Hello World</p>")
          )
        );
      }
    }
    

    Passing a mix of markup and components to a ChildContent parameter is done by simply calling the ComponentParameterCollectionBuilder<TComponent>'s AddChildContent() methods as seen here.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<ChildContentParams>
                                <h1>Below you will find a most interesting alert!</h1>
                                <Alert Heading="Alert heading" [email protected]>
                                  <p>Hello World</p>
                                </Alert>
                              </ChildContentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some Razor markup, and parameters to the child component, is just passed like normal in Razor code.

    RenderFragment parameters

    A RenderFragment parameter is very similar to the special ChildContent parameter described in the previous section, since a ChildContent parameter is of type RenderFragment. The only difference is the name, which must be anything other than ChildContent.

    In Blazor, a RenderFragment parameter can be regular HTML markup, it can be Razor markup, e.g. other component declarations, or it can be a mix of the two. If it is another component, then that component can also receive child content, and so forth.

    The following subsections have different examples of content being passed to the following component's RenderFragment parameter:

    public class RenderFragmentParams : ComponentBase
    {
      [Parameter]
      public RenderFragment Content { get; set; }
    }
    

    Passing HTML to a RenderFragment parameter

    • C# test code
    • Razor test code
    public class RenderFragmentParams1Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<RenderFragmentParams>(parameters => parameters
          .Add(p => p.Content, "<h1>Hello World</h1>")
        );
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s Add method to pass an HTML markup string as the input to the RenderFragment parameter.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<RenderFragmentParams>
                                <Content><h1>Hello World</h1></Content>
                              </RenderFragmentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some HTML markup, is just passed like normal in Razor code.

    Passing a component without parameters to a RenderFragment parameter

    To pass a component such as the classic <Counter> component, which does not take any parameters, to a RenderFragment parameter, do the following:

    • C# test code
    • Razor test code
    public class RenderFragmentParams2Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<RenderFragmentParams>(parameters => parameters
          .Add<Counter>(p => p.Content)
        );
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s Add<TChildComponent> method, where TChildComponent is the (child) component that should be passed to the RenderFragment parameter.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<RenderFragmentParams>
                                <Content><Counter /></Content>
                              </RenderFragmentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some Razor markup, is just passed like normal in Razor code.

    Passing a component with parameters to a RenderFragment parameter

    To pass a component with parameters to a RenderFragment parameter, e.g. the <Alert> component with the following parameters, do the following:

    [Parameter] public string Heading { get; set; }
    [Parameter] public AlertType Type { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    
    • C# test code
    • Razor test code
    public class RenderFragmentParams3Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<RenderFragmentParams>(parameters => parameters
          .Add<Alert>(p => p.Content, alertParameters => alertParameters
            .Add(p => p.Heading, "Alert heading")
            .Add(p => p.Type, AlertType.Warning)
            .AddChildContent("<p>Hello World</p>")
          )
        );
      }
    }
    

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s Add<TChildComponent> method, where TChildComponent is the (child) component that should be passed to the RenderFragment parameter. The Add<TChildComponent> method takes an optional ComponentParameterCollectionBuilder<TComponent> as input, which can be used to pass parameters to the TChildComponent component, which in this case is the <Alert> component.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<RenderFragmentParams>
                                <Content>
                                  <Alert Heading="Alert heading" [email protected]>
                                    <p>Hello World</p>
                                  </Alert>
                                </Content>
                              </RenderFragmentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some Razor markup, and parameters to the child component, is just passed like normal in Razor code.

    Passing a mix of Razor and HTML to a RenderFragment parameter

    Some times you need to pass multiple different types of content to a RenderFragment parameter, e.g. both markup and and a component. This can be done in the following way:

    • C# test code
    • Razor test code
    public class RenderFragmentParams4Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<RenderFragmentParams>(parameters => parameters
          .Add(p => p.Content, "<h1>Below you will find a most interesting alert!</h1>")
          .Add<Alert>(p => p.Content, childParams => childParams
            .Add(p => p.Heading, "Alert heading")
            .Add(p => p.Type, AlertType.Warning)
            .AddChildContent("<p>Hello World</p>")
          )
        );
      }
    }
    

    Passing a mix of markup and components to a RenderFragment parameter is simply done by calling the ComponentParameterCollectionBuilder<TComponent>'s Add() methods or using the ChildContent() factory methods in ComponentParameterFactory, as seen here.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<RenderFragmentParams>
                                <Content>
                                  <h1>Below you will find a most interesting alert!</h1>
                                  <Alert Heading="Alert heading" [email protected]>
                                    <p>Hello World</p>
                                  </Alert>
                                </Content>
                              </RenderFragmentParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child content, some HTML and Razor markup, and parameters to the child component, is just passed like normal in Razor code.

    Templates parameters

    Template parameters are closely related to the RenderFragment parameters described in the previous section. The difference is that a template parameter is of type RenderFragment<TValue>. As with a regular RenderFragment, a RenderFragment<TValue> template parameter can consist of regular HTML markup, it can be Razor markup, e.g. other component declarations, or it can be a mix of the two. If it is another component, then that component can also receive child content, and so forth.

    The following examples renders a template component which has a RenderFragment<TValue> template parameter:

    @typeparam TItem
    
    <div id="generic-list">
      @foreach (var item in Items)
      {
        @Template(item)
      }
    </div>
    
    @code 
    {
      [Parameter]
      public IEnumerable<TItem> Items { get; set; }
    
      [Parameter]
      public RenderFragment<TItem> Template { get; set; }
    }
    

    Passing HTML-based templates

    To pass a template into a RenderFragment<TValue> parameter that just consists of regular HTML markup, do the following:

    • C# test code
    • Razor test code
    public class TemplateParams1Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<TemplateParams<string>>(parameters => parameters
          .Add(p => p.Items, new[] { "Foo", "Bar", "Baz" })
          .Add(p => p.Template, item => $"<span>{item}</span>")
        );
      }
    }
    

    The examples pass a HTML markup template into the component under test. This is done with the help of a Func<TValue, string> delegate which takes whatever the template value is as input, and returns a (markup) string. The delegate is automatically turned into a RenderFragment<TValue> type and passed to the template parameter.

    The example uses the ComponentParameterCollectionBuilder<TComponent>'s Add method to first add the data to the Items parameter and then to a Func<TValue, string> delegate.

    The delegate creates a simple markup string in the example.

    @code
    {
    #if NET6_0
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<TemplateParams [email protected](new[] { "Foo", "Bar", "Baz" }) TItem="string">
                                <Template>
                                  <span>@context</span>
                                </Template>
                              </TemplateParams>);
      }
    #endif
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child template content, some HTML markup, is just passed like normal in Razor code.

    NOTE: Before the .NET 6 version of the Blazor compiler, this example does not work.

    Passing a component-based template

    To pass a template into a RenderFragment<TValue> parameter, which is based on a component that receives the template value as input (in this case, the <Item> component listed below), do the following:

    <span>@Value</span>
    @code 
    {
      [Parameter]
      public string Value { get; set; }
    }
    
    • C# test code
    • Razor test code
    public class TemplateParams2Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<TemplateParams<string>>(parameters => parameters
          .Add(p => p.Items, new[] { "Foo", "Bar", "Baz" })
          .Add<Item, string>(p => p.Template, value => itemParams => itemParams
            .Add(p => p.Value, value)
          )
        );
      }
    }
    

    The example creates a template with the <Item> component listed above.

    @code
    {
    #if NET6_0
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<TemplateParams [email protected](new string[]{ "Foo", "Bar", "Baz" }) TItem="string">
                                <Template>
                                  <Item [email protected]></Item>
                                </Template>
                              </TemplateParams>);
      }
    #endif
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The child template content, some HTML and Razor markup, is just passed like normal in Razor code.

    NOTE: Before the .NET 6 version of the Blazor compiler, this example does not work.

    Unmatched parameters

    An unmatched parameter is a parameter that is passed to a component under test, and which does not have an explicit [Parameter] parameter but instead is captured by a [Parameter(CaptureUnmatchedValues = true)] parameter.

    In the follow examples, we will pass an unmatched parameter to the following component:

    public class UnmatchedParams : ComponentBase
    {
      [Parameter(CaptureUnmatchedValues = true)]
      public Dictionary<string, object> InputAttributes { get; set; }
    }
    
    • C# test code
    • Razor test code
    public class UnmatchedParamsTest
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<UnmatchedParams>(parameters => parameters
          .AddUnmatched("some-unknown-param", "a value")
        );
      }
    }
    

    The examples passes in the parameter some-unknown-param with the value a value to the component under test.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<UnmatchedParams some-unknown-param="a value"></UnmatchedParams>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The parameter is just passed like normal in Razor code.

    Cascading Parameters and Cascading Values

    Cascading parameters are properties with the [CascadingParameter] attribute. There are two variants: named and unnamed cascading parameters. In Blazor, the <CascadingValue> component is used to provide values to cascading parameters, which we also do in tests written in .razor files. However, for tests written in .cs files we need to do it a little differently.

    The following examples will pass cascading values to the <CascadingParams> component listed below:

    @code 
    {
      [CascadingParameter]
      public bool IsDarkTheme { get; set; }
    
      [CascadingParameter(Name = "LoggedInUser")]
      public string UserName { get; set; }
        
      [CascadingParameter(Name = "LoggedInEmail")]
      public string Email { get; set; }
    }
    

    Passing unnamed cascading values

    To pass the unnamed IsDarkTheme cascading parameter to the <CascadingParams> component, do the following:

    • C# test code
    • Razor test code
    public class CascadingParams1Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var isDarkTheme = true;
    
        var cut = ctx.RenderComponent<CascadingParams>(parameters => parameters
          .Add(p => p.IsDarkTheme, isDarkTheme)
        );
      }
    }
    

    The example pass the variable isDarkTheme to the cascading parameter IsDarkTheme using the Add method on the ComponentParameterCollectionBuilder<TComponent> with the parameter selector to explicitly select the desired cascading parameter and pass the unnamed parameter value that way.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var isDarkTheme = true;
    
        var cut = ctx.Render(@<CascadingValue Value="isDarkTheme">
                                <CascadingParams />
                              </CascadingValue>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The cascading value is just passed like normal in Razor code.

    Passing named cascading values

    To pass a named cascading parameter to the <CascadingParams> component, do the following:

    • C# test code
    • Razor test code
    public class CascadingParams2Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.RenderComponent<CascadingParams>(parameters => parameters
          .Add(p => p.UserName, "Name of User")
        );
      }
    }
    

    The example pass in the value Name of User to the cascading parameter with the name LoggedInUser. Note that the name of the parameter is not the same as the property of the parameter, e.g. LoggedInUser vs. UserName. The example uses the Add method on the ComponentParameterCollectionBuilder<TComponent> with the parameter selector to select the cascading parameter property and pass the parameter value that way.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render(@<CascadingValue Name="LoggedInUser" [email protected]("Name of User")>
                                <CascadingParams />
                              </CascadingValue>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The cascading value is just passed like normal in Razor code.

    Passing multiple, named and unnamed, cascading values

    To pass all cascading parameters to the <CascadingParams> component, do the following:

    • C# test code
    • Razor test code
    public class CascadingParams3Test
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var isDarkTheme = true;
    
        var cut = ctx.RenderComponent<CascadingParams>(parameters => parameters
          .Add(p => p.IsDarkTheme, isDarkTheme)
          .Add(p => p.UserName, "Name of User")
          .Add(p => p.Email, "[email protected]")
        );
      }
    }
    

    The example passes both the unnamed IsDarkTheme cascading parameter and the two named cascading parameters (LoggedInUser, LoggedInEmail). It does this using the Add method on the ComponentParameterCollectionBuilder<TComponent> with the parameter selector to select both the named and unnamed cascading parameters and pass values to them that way.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var isDarkTheme = true;
    
        var cut = ctx.Render(@<CascadingValue Name="LoggedInUser" [email protected]("Name of User")>
                                <CascadingValue Name="LoggedInEmail" [email protected]("[email protected]")>
                                  <CascadingValue Value="isDarkTheme">
                                    <CascadingParams />
                                  </CascadingValue>
                                </CascadingValue>
                              </CascadingValue>);
      }
    }
    

    The example passes a inline Razor template to the Render(RenderFragment) method. The cascading value is just passed like normal in Razor code.

    Rendering a component under test inside other components

    It is possible to nest a component under tests inside other components, if that is required to test it. For example, to nest the <HelloWorld> component inside the <Wrapper> component do the following:

    • C# test code
    • Razor test code
    public class NestedComponentTest
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var wrapper = ctx.RenderComponent<Wrapper>(parameters => parameters
          .AddChildContent<HelloWorld>()
        );
        var cut = wrapper.FindComponent<HelloWorld>();
      }
    }
    

    The example renders the <HelloWorld> component inside the <Wrapper> component. What is special in both cases is the use of the FindComponent<HelloWorld>() that returns a IRenderedComponent<HelloWorld>. This is needed because the RenderComponent<Wrapper> method call returns an IRenderedComponent<Wrapper> instance, that provides access to the instance of the <Wrapper> component, but not the <HelloWorld>-component instance.

    @code
    {
      [Fact]
      public void Test()
      {
        using var ctx = new TestContext();
    
        var cut = ctx.Render<HelloWorld>(@<Wrapper>
                                            <HelloWorld />
                                          </Wrapper>);
      }
    }
    

    The example passes a inline Razor template to the Render<TComponent>() method. What is different here from the previous examples is that we use the generic version of the Render<TComponent> method, which is a shorthand for Render(...).FindComponent<TComponent>().

    Further Reading

    • Injecting services into components under test

    Premium sponsor: Progress Telerik.

    Editorial support provided by Packt.

    Supported by the .NET Foundation.

    • Improve this Doc
    Back to top Documentation updated on 06/27/2022 20:44:01 +00:00 in commit 9a81bc9b93.