diff --git a/packages/styleguide/src/components/Preview/CodeExample.js b/packages/styleguide/src/components/Preview/CodeExample.js
index 49aca0ccdd3..28f48aa1bfa 100644
--- a/packages/styleguide/src/components/Preview/CodeExample.js
+++ b/packages/styleguide/src/components/Preview/CodeExample.js
@@ -211,6 +211,7 @@ export default class CodeExample extends React.Component {
         <Code
           inline={false}
           ref={this.codeBlockRef}
+          data-testid={this.state.codePreviewType}
           language={
             this.state.codePreviewType === 'html'
               ? 'markup'
diff --git a/packages/styleguide/src/components/Preview/Preview.test.js b/packages/styleguide/src/components/Preview/Preview.test.js
index ff7113f4326..1da9e35a866 100644
--- a/packages/styleguide/src/components/Preview/Preview.test.js
+++ b/packages/styleguide/src/components/Preview/Preview.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 import Preview from '.';
 
@@ -8,4 +8,19 @@ describe('rendering', () => {
     const { getByText } = render(<Preview>Preview</Preview>);
     expect(getByText('Preview')).toBeInTheDocument();
   });
+
+  it('HTML preview renders more than 1 child', () => {
+    const { getByText, getByTestId } = render(
+      <Preview>
+        <p>Paragraph 1</p>
+        <p>Paragraph 2</p>
+      </Preview>
+    );
+
+    fireEvent.click(getByText('SHOW CODE'));
+
+    fireEvent.click(getByText('HTML'));
+
+    expect(getByTestId('html')).toBeInTheDocument();
+  });
 });