Snapshot test email templates using Verify to catch regressions. Validates rendered HTML output matches approved baseline. Works with MJML templates and any email renderer.

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 Basic Email Snapshot Test 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 2. Browser Preview Open the .received.html file in a browser to see the actual rendering. 3. IDE Integration Most IDEs show inline diffs for .verified.html vs .received.html files. Test Each Template Variant Create tests for each email template to catch regressions: Scrubbing Dynamic Values Some values change between test runs. Scrub them: Common Scrubbers Test Fixture for Email Tests Composer Snapshot Tests Test the full composer output including subject and metadata: CI Integration Fail on Missing Baseline In CI, fail if no .verified.html file exists (prevents accidental acceptance): Git Configuration Add to .gitattributes to improve diff handling: Best Practices DO DON'T Workflow 1. Create template Write MJML template 2. Write test Add snapshot test with sample variables 3. Run test First run creates .verified.html 4. Review Open in browser, verify rendering 5. Commit Include .verified.html in source control 6. Iterate Changes fail test, review diff, accept if correct Resources Verify : https://github.com/VerifyTests/Verify Verify.Xunit : https://github.com/VerifyTests/Verify xunit Diff Tools : https://github.com/VerifyTests/DiffEngine

verify-email-snapshots