diff --git a/spec/support/matchers/eq_html.rb b/spec/support/matchers/eq_html.rb
new file mode 100644
index 0000000..4e0c301
--- /dev/null
+++ b/spec/support/matchers/eq_html.rb
@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module ComponentMatchers
+  class EqHtml
+    attr_reader :actual, :expected
+
+    def initialize(expected)
+      @expected = expected
+      @actual = nil
+      @invalid_response = nil
+    end
+
+    def matches?(html_fragment)
+      html_fragment = html_fragment.to_html if html_fragment.is_a? Nokogiri::HTML::DocumentFragment
+
+      @actual = html_fragment
+
+      @actual == expected_formatted
+    end
+
+    def failure_message
+      "expected: #{actual}\n\n     got: #{expected}"
+    end
+
+    def failure_message_when_negated
+      "expected: value != #{actual}\n\n     got: #{expected}"
+    end
+
+    def description
+      "has HTML containing #{expected_formatted}"
+    end
+
+    def diffable?
+      true
+    end
+
+    private
+
+    def expected_formatted
+      expected.chomp
+    end
+  end
+
+  def eq_html(html)
+    EqHtml.new(html)
+  end
+end
+
+RSpec.configure do |config|
+  config.include ComponentMatchers, type: :component
+end
diff --git a/spec/view_component/form/button_component_spec.rb b/spec/view_component/form/button_component_spec.rb
index b0847f3..e3c035f 100644
--- a/spec/view_component/form/button_component_spec.rb
+++ b/spec/view_component/form/button_component_spec.rb
@@ -12,9 +12,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<button name="button" type="submit">Send</button>)
-      )
+      expect(component).to eq_html <<~HTML
+        <button name="button" type="submit">Send</button>
+      HTML
     end
   end
 
@@ -26,9 +26,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<button name="button" type="submit">Send <strong>now</strong>!</button>)
-      )
+      expect(component).to eq_html <<~HTML
+        <button name="button" type="submit">Send <strong>now</strong>!</button>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/check_box_component_spec.rb b/spec/view_component/form/check_box_component_spec.rb
index 069f4aa..ca4d9be 100644
--- a/spec/view_component/form/check_box_component_spec.rb
+++ b/spec/view_component/form/check_box_component_spec.rb
@@ -10,10 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input name="user[admin]" type="hidden" value="0">) +
-          %(<input type="checkbox" value="1" name="user[admin]" id="user_admin">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input name="user[admin]" type="hidden" value="0"><input type="checkbox" value="1" name="user[admin]" id="user_admin">
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/collection_check_boxes_component_spec.rb b/spec/view_component/form/collection_check_boxes_component_spec.rb
index 213c62d..4581a75 100644
--- a/spec/view_component/form/collection_check_boxes_component_spec.rb
+++ b/spec/view_component/form/collection_check_boxes_component_spec.rb
@@ -22,14 +22,10 @@
   let(:component_html_attributes) { component.css("input").last.attributes }
 
   context "with simple args" do
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<input type=\"hidden\" name=\"user[nationalities][]\" value=\"\">" \
-        "<input type=\"checkbox\" value=\"BE\" name=\"user[nationalities][]\" id=\"user_nationalities_be\">" \
-        "<label for=\"user_nationalities_be\">Belgium</label>" \
-        "<input type=\"checkbox\" value=\"FR\" name=\"user[nationalities][]\" id=\"user_nationalities_fr\">" \
-        "<label for=\"user_nationalities_fr\">France</label>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <input type="hidden" name="user[nationalities][]" value=""><input type="checkbox" value="BE" name="user[nationalities][]" id="user_nationalities_be"><label for="user_nationalities_be">Belgium</label><input type="checkbox" value="FR" name="user[nationalities][]" id="user_nationalities_fr"><label for="user_nationalities_fr">France</label>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/collection_radio_buttons_component_spec.rb b/spec/view_component/form/collection_radio_buttons_component_spec.rb
index af142f7..e7ebd1c 100644
--- a/spec/view_component/form/collection_radio_buttons_component_spec.rb
+++ b/spec/view_component/form/collection_radio_buttons_component_spec.rb
@@ -22,14 +22,10 @@
   let(:component_html_attributes) { component.css("input").last.attributes }
 
   context "with simple args" do
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<input type=\"hidden\" name=\"user[nationalities]\" value=\"\">" \
-        "<input type=\"radio\" value=\"BE\" name=\"user[nationalities]\" id=\"user_nationalities_be\">" \
-        "<label for=\"user_nationalities_be\">Belgium</label>" \
-        "<input type=\"radio\" value=\"FR\" name=\"user[nationalities]\" id=\"user_nationalities_fr\">" \
-        "<label for=\"user_nationalities_fr\">France</label>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <input type="hidden" name="user[nationalities]" value=""><input type="radio" value="BE" name="user[nationalities]" id="user_nationalities_be"><label for="user_nationalities_be">Belgium</label><input type="radio" value="FR" name="user[nationalities]" id="user_nationalities_fr"><label for="user_nationalities_fr">France</label>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/collection_select_component_spec.rb b/spec/view_component/form/collection_select_component_spec.rb
index 1fb70c3..243fc7a 100644
--- a/spec/view_component/form/collection_select_component_spec.rb
+++ b/spec/view_component/form/collection_select_component_spec.rb
@@ -23,10 +23,10 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        "<select name=\"user[country]\" id=\"user_country\"><option value=\"BE\">Belgium</option>\n" \
-        "<option value=\"FR\">France</option></select>"
-      )
+      expect(component).to eq_html <<~HTML
+        <select name="user[country]" id="user_country"><option value="BE">Belgium</option>
+        <option value="FR">France</option></select>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/color_field_component_spec.rb b/spec/view_component/form/color_field_component_spec.rb
index 29969f4..b531713 100644
--- a/spec/view_component/form/color_field_component_spec.rb
+++ b/spec/view_component/form/color_field_component_spec.rb
@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input value="#000000" type="color" name="user[background_color]" id="user_background_color">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input value="#000000" type="color" name="user[background_color]" id="user_background_color">
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/file_field_component_spec.rb b/spec/view_component/form/file_field_component_spec.rb
index 75dd0e9..54618ff 100644
--- a/spec/view_component/form/file_field_component_spec.rb
+++ b/spec/view_component/form/file_field_component_spec.rb
@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="file" name="user[avatar]" id="user_avatar">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="file" name="user[avatar]" id="user_avatar">
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/grouped_collection_select_component_spec.rb b/spec/view_component/form/grouped_collection_select_component_spec.rb
index a4c618e..e1f1949 100644
--- a/spec/view_component/form/grouped_collection_select_component_spec.rb
+++ b/spec/view_component/form/grouped_collection_select_component_spec.rb
@@ -40,14 +40,14 @@
   let(:component_html_attributes) { component.css("select").last.attributes }
 
   context "with simple args" do
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<select name=\"user[country]\" id=\"user_country\"><optgroup label=\"Europe\">\n" \
-        "<option value=\"BE\">Belgium</option>\n" \
-        "<option value=\"FR\">France</option>\n" \
-        "</optgroup>\n" \
-        "<optgroup label=\"Asia\"><option value=\"JP\">Japan</option></optgroup></select>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <select name="user[country]" id="user_country"><optgroup label="Europe">
+        <option value="BE">Belgium</option>
+        <option value="FR">France</option>
+        </optgroup>
+        <optgroup label="Asia"><option value="JP">Japan</option></optgroup></select>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/label_component_spec.rb b/spec/view_component/form/label_component_spec.rb
index b893396..98801e0 100644
--- a/spec/view_component/form/label_component_spec.rb
+++ b/spec/view_component/form/label_component_spec.rb
@@ -11,9 +11,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name">First name</label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name">First name</label>
+      HTML
     end
   end
 
@@ -22,9 +22,9 @@
     let(:component) { render_inline(described_class.new(form, object_name, :first_name, "Your first name", options)) }
 
     it do
-      expect(component.to_html).to eq(
-        %(<label class="custom-label" for="user_first_name">Your first name</label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label class="custom-label" for="user_first_name">Your first name</label>
+      HTML
     end
   end
 
@@ -36,9 +36,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name">Your <strong>first name</strong></label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name">Your <strong>first name</strong></label>
+      HTML
     end
   end
 
@@ -50,9 +50,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name"><span class="translated-label">First name</span></label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name"><span class="translated-label">First name</span></label>
+      HTML
     end
   end
 
@@ -65,9 +65,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name"><span class="translated-label">First name</span></label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name"><span class="translated-label">First name</span></label>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/radio_button_component_spec.rb b/spec/view_component/form/radio_button_component_spec.rb
index 3aa162f..77fc6a1 100644
--- a/spec/view_component/form/radio_button_component_spec.rb
+++ b/spec/view_component/form/radio_button_component_spec.rb
@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="radio" value="mrs" name="user[civility]" id="user_civility_mrs">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="radio" value="mrs" name="user[civility]" id="user_civility_mrs">
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/search_field_component_spec.rb b/spec/view_component/form/search_field_component_spec.rb
index 79032d8..62757ef 100644
--- a/spec/view_component/form/search_field_component_spec.rb
+++ b/spec/view_component/form/search_field_component_spec.rb
@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="search" name="user[query]" id="user_query">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="search" name="user[query]" id="user_query">
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/select_component_spec.rb b/spec/view_component/form/select_component_spec.rb
index d233513..ebb481e 100644
--- a/spec/view_component/form/select_component_spec.rb
+++ b/spec/view_component/form/select_component_spec.rb
@@ -20,10 +20,10 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        "<select name=\"user[role]\" id=\"user_role\"><option value=\"admin\">Admin</option>\n" \
-        "<option value=\"manager\">Manager</option></select>"
-      )
+      expect(component).to eq_html <<~HTML
+        <select name="user[role]" id="user_role"><option value="admin">Admin</option>
+        <option value="manager">Manager</option></select>
+      HTML
     end
   end
 
@@ -31,23 +31,21 @@
     let(:options) { { selected: "manager" } }
 
     it do
-      expect(component.to_html).to eq(
-        "<select name=\"user[role]\" id=\"user_role\"><option value=\"admin\">Admin</option>\n" \
-        "<option selected value=\"manager\">Manager</option></select>"
-      )
+      expect(component).to eq_html <<~HTML
+        <select name="user[role]" id="user_role"><option value="admin">Admin</option>
+        <option selected value="manager">Manager</option></select>
+      HTML
     end
   end
 
   context "with multiple select" do
     let(:html_options) { { multiple: true } }
 
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<input name=\"user[role][]\" type=\"hidden\" value=\"\">" \
-        "<select multiple name=\"user[role][]\" id=\"user_role\">" \
-        "<option value=\"admin\">Admin</option>\n" \
-        "<option value=\"manager\">Manager</option></select>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <input name="user[role][]" type="hidden" value=""><select multiple name="user[role][]" id="user_role"><option value="admin">Admin</option>
+        <option value="manager">Manager</option></select>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/submit_component_spec.rb b/spec/view_component/form/submit_component_spec.rb
index f6faf09..cff0168 100644
--- a/spec/view_component/form/submit_component_spec.rb
+++ b/spec/view_component/form/submit_component_spec.rb
@@ -11,9 +11,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="submit" name="commit" value="" data-disable-with="">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="submit" name="commit" value="" data-disable-with="">
+      HTML
     end
   end
 
@@ -21,9 +21,9 @@
     let(:value) { "Save" }
 
     it do
-      expect(component.to_html).to eq(
-        %(<input type="submit" name="commit" value="Save" data-disable-with="Save">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="submit" name="commit" value="Save" data-disable-with="Save">
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/text_area_component_spec.rb b/spec/view_component/form/text_area_component_spec.rb
index c55e139..5d910e0 100644
--- a/spec/view_component/form/text_area_component_spec.rb
+++ b/spec/view_component/form/text_area_component_spec.rb
@@ -10,9 +10,10 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<textarea name="user[bio]" id="user_bio">\n</textarea>)
-      )
+      expect(component).to eq_html <<~HTML
+        <textarea name="user[bio]" id="user_bio">
+        </textarea>
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/text_field_component_spec.rb b/spec/view_component/form/text_field_component_spec.rb
index 4e5bf9b..e6d230a 100644
--- a/spec/view_component/form/text_field_component_spec.rb
+++ b/spec/view_component/form/text_field_component_spec.rb
@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="text" name="user[email]" id="user_email">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="text" name="user[email]" id="user_email">
+      HTML
     end
   end
 
diff --git a/spec/view_component/form/url_field_component_spec.rb b/spec/view_component/form/url_field_component_spec.rb
index 94e3ae7..0bf9e7c 100644
--- a/spec/view_component/form/url_field_component_spec.rb
+++ b/spec/view_component/form/url_field_component_spec.rb
@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="url" name="user[wiki_url]" id="user_wiki_url">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="url" name="user[wiki_url]" id="user_wiki_url">
+      HTML
     end
   end