Blazor - bUnit 컴포넌트 내의 Parameter 단위 테스트 방법

개요

• bUnit 을 이용하여 Blazor 컴포넌트 단위의 단위 테스트 하는 방법에 대해서 정리 진행합니다.
• 그 중에서, 컴포넌트 내의 선언된 특정 Parameter 값을 단위 테스트 하는 방법에 대해서 알아 봅니다.

테스트 컴포넌트 생성

• 우선 테스트를 진행하기 위해서 TestComponent.razor 파일을 생성 후 아래와 같이 코드를 추가합니다.
• HTML 영역에는 단락을 나타내는 p 태그가 있고, p 태그 내용은 Paramter 로 입력 받는 Message 속성이 출력되는 아주 간단한 컴포넌트를 생성하였습니다.
• 이제 해당 컴포넌트를 bUnit 을 이용하여 단위 테스트 코드를 작성해 보도록 하겠습니다.

<p>Message: @Message</p>

@code {
    [Parameter]
    public string Message { get; set; }
}

단위 테스트 코드

using Bunit;
using bUnitSample.Pages;

namespace bUnitTest
{
    public class UnitTest1
    {
        [Fact]
        public void TestComponent()
        {
            // Arrange
            var message = "Message from test";
            using var ctx = new TestContext();
            var cut = ctx.RenderComponent<TestComponent>(parameters => parameters.Add(p => p.Message, message));

            // Act

            // Assert
            cut.MarkupMatches($"<p>Message: {message}</p>");
        }
    }
}

• 위에서 var cut = ctx.RenderComponent<TestComponent>(parameters => parameters.Add(p => p.Message, message)); 위와 같이 TestComponent.razor 컴포넌트의 파라미터 값인 Message 값을 가져와 테스트로 입력할 var message = "Message from test"; 변수값으로 바인딩해주는 것을 확인할 수 있습니다.
• 최종적으로 cut.MarkupMatches($"<p>Message: {message}</p>"); 입력받은 message 값으로 Assert 해줄 수 있습니다.