verify-email-snapshots

Snapshot Testing Email Templates with Verify

When to Use This Skill

Use this skill when:

• Testing email template rendering for regressions
• Validating MJML templates compile to expected HTML
• Reviewing email changes in code review (diffs are visual)
• Ensuring variable substitution works correctly

Related skills:

• aspnetcore/mjml-email-templates - MJML template authoring
• aspire/mailpit-integration - Test email delivery locally
• testing/snapshot-testing - General Verify patterns

---

Why Snapshot Test Emails?

Email templates are:

1. Visual - Small changes can break rendering across clients
2. Hard to unit test - Output is complex HTML, not simple values
3. Prone to regression - Template changes can have unintended effects

Snapshot testing captures the rendered HTML and fails when it changes unexpectedly.

---

Installation

dotnet add package Verify.Xunit  # or Verify.NUnit, Verify.MSTest

---

Basic Email Snapshot Test

[Fact]
public async Task UserSignupInvitation_RendersCorrectly()
{
    // Arrange
    var renderer = _services.GetRequiredService<IMjmlTemplateRenderer>();

    var variables = new Dictionary<string, string>
    {
        { "PreviewText", "You've been invited to join Acme Corp" },
        { "OrganizationName", "Acme Corporation" },
        { "InviteeName", "John Doe" },
        { "InviterName", "Jane Admin" },
        { "InvitationLink", "https://example.com/invite/abc123" },
        { "ExpirationDate", "December 31, 2025" }
    };

    // Act
    var html = await renderer.RenderTemplateAsync(
        "UserInvitations/UserSignupInvitation",
        variables);

    // Assert
    await Verify(html, extension: "html");
}

This creates UserSignupInvitation_RendersCorrectly.verified.html on first run.

---

Reviewing Email Changes

When a template changes, the test fails with a diff. Review options:

1. Visual Diff Tool

# Configure diff tool (one-time)
dotnet tool install -g verify.tool
verify accept  # Accept all pending changes
verify review  # Open diff tool