diff --git a/src/components/details/details.spec.js b/src/components/details/details.spec.js
index 610aca3356..891288c59f 100644
--- a/src/components/details/details.spec.js
+++ b/src/components/details/details.spec.js
@@ -1,4 +1,4 @@
-import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_DETAILS_BASIC = {
   id: 'details-id',
@@ -6,11 +6,21 @@ const EXAMPLE_DETAILS_BASIC = {
   content: 'Content for details',
 };
 
-const EXAMPLE_DETAILS_BASIC_2 = {
-  id: 'details-id-2',
-  title: 'Title for details',
-  content: 'Content for details',
-};
+const EXAMPLE_PAGE = `
+      ${renderComponent('details', {
+        id: 'details-id',
+        title: 'Title for details',
+        content: 'Content for details',
+      })}
+
+      ${renderComponent('details', {
+        id: 'details-id-2',
+        title: 'Title for details',
+        content: 'Content for details',
+      })}
+  `;
+
+const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
 
 describe('script: details', () => {
   it('begins open when specified', async () => {
@@ -49,7 +59,7 @@ describe('script: details', () => {
 
   describe('when there is more than one details component and a details heading is clicked to open the details', () => {
     beforeEach(async () => {
-      await setTestPage('/test', (renderComponent('details', EXAMPLE_DETAILS_BASIC), renderComponent('details', EXAMPLE_DETAILS_BASIC_2)));
+      await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
       await page.click('#details-id > .ons-js-details-heading');
     });