diff --git a/src/pages/HostingPreferences.vue b/src/pages/HostingPreferences.vue
index 414207be..6431a173 100644
--- a/src/pages/HostingPreferences.vue
+++ b/src/pages/HostingPreferences.vue
@@ -84,6 +84,7 @@ function onTogglePaidHosting(isToggledOn: boolean): void {
       <TogglePaidHostingSection
         :paidHostingEnabled="isPaidHostingEnabled"
         @paid_hosting_toggled="onTogglePaidHosting"
+        data-test-toggle-paid-hosting-section
       />    
       <PricesSection
         v-if="isPaidHostingEnabled"
diff --git a/src/pages/__tests__/HostingPreferences.test.js b/src/pages/__tests__/HostingPreferences.test.js
index dc409222..1dfa01d9 100644
--- a/src/pages/__tests__/HostingPreferences.test.js
+++ b/src/pages/__tests__/HostingPreferences.test.js
@@ -57,12 +57,16 @@ describe('hosting preferences page', () => {
       expect(wrapper.findAll('[data-test-hosting-preferences-layout]')).toHaveLength(1)
     })
 
-    it('with prices section', () => {
-      expect(wrapper.findAll('[data-test-hosting-preferences-prices-section]')).toHaveLength(1)
+    it('with toggle paid hosting section', () => {
+      expect(wrapper.findAll('[data-test-toggle-paid-hosting-section]')).toHaveLength(1)
+    })
+        
+    it('without prices section when paid hosting toggled off', () => {
+      expect(wrapper.findAll('[data-test-hosting-preferences-prices-section]')).toHaveLength(0)
     })
 
-    it('with invoices section', () => {
-      expect(wrapper.findAll('[data-test-hosting-preferences-invoices-section]')).toHaveLength(1)
+    it('without invoices section when paid hosting toggled off', () => {
+      expect(wrapper.findAll('[data-test-hosting-preferences-invoices-section]')).toHaveLength(0)
     })
 
     it('with happ selection section', () => {