diff --git a/frontend/components/badge-examples.js b/frontend/components/badge-examples.js
index 88dad56dff..929a7f1f24 100644
--- a/frontend/components/badge-examples.js
+++ b/frontend/components/badge-examples.js
@@ -75,10 +75,6 @@ export default class BadgeExamples extends React.Component {
   render() {
     const { definitions } = this.props
 
-    if (!definitions) {
-      return null
-    }
-
     const flattened = definitions.reduce((accum, current) => {
       const { examples } = current
       return accum.concat(examples)
diff --git a/frontend/components/badge-examples.spec.js b/frontend/components/badge-examples.spec.js
new file mode 100644
index 0000000000..40c635d99a
--- /dev/null
+++ b/frontend/components/badge-examples.spec.js
@@ -0,0 +1,126 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import BadgeExamples from './badge-examples'
+
+import '../enzyme-conf.spec'
+
+const exampleServiceDefinitions = [
+  {
+    examples: [
+      {
+        title: 'Mozilla Add-on',
+        example: {
+          pattern: '/amo/d/:addonId',
+          namedParams: {
+            addonId: 'dustman',
+          },
+          queryParams: {},
+        },
+        preview: {
+          label: 'downloads',
+          message: '12k',
+          color: 'brightgreen',
+        },
+        keywords: ['amo', 'firefox'],
+      },
+    ],
+  },
+  {
+    examples: [
+      {
+        title: 'Mozilla Add-on',
+        example: {
+          pattern: '/amo/rating/:addonId',
+          namedParams: {
+            addonId: 'dustman',
+          },
+          queryParams: {},
+        },
+        preview: {
+          label: 'rating',
+          message: '4/5',
+          color: 'brightgreen',
+        },
+        keywords: ['amo', 'firefox'],
+      },
+      {
+        title: 'Mozilla Add-on',
+        example: {
+          pattern: '/amo/stars/:addonId',
+          namedParams: {
+            addonId: 'dustman',
+          },
+          queryParams: {},
+        },
+        preview: {
+          label: 'stars',
+          message: '★★★★☆',
+          color: 'brightgreen',
+        },
+        keywords: ['amo', 'firefox'],
+      },
+    ],
+  },
+  {
+    examples: [
+      {
+        title: 'Mozilla Add-on',
+        example: {
+          pattern: '/amo/users/:addonId',
+          namedParams: {
+            addonId: 'dustman',
+          },
+          queryParams: {},
+        },
+        preview: {
+          label: 'users',
+          message: '750',
+          color: 'blue',
+        },
+        keywords: ['amo', 'firefox'],
+      },
+    ],
+  },
+  {
+    examples: [
+      {
+        title: 'Mozilla Add-on',
+        example: {
+          pattern: '/amo/v/:addonId',
+          namedParams: {
+            addonId: 'dustman',
+          },
+          queryParams: {},
+        },
+        preview: {
+          label: 'mozilla add-on',
+          message: 'v2.1.0',
+          color: 'blue',
+        },
+        keywords: ['amo', 'firefox'],
+      },
+    ],
+  },
+]
+
+describe('<BadgeExamples />', function() {
+  it('renders with no examples', function() {
+    shallow(
+      <BadgeExamples
+        baseUrl="https://example.shields.io"
+        definitions={[]}
+        onClick={() => {}}
+      />
+    )
+  })
+
+  it('renders an array of examples', function() {
+    shallow(
+      <BadgeExamples
+        baseUrl="https://example.shields.io"
+        definitions={exampleServiceDefinitions}
+        onClick={() => {}}
+      />
+    )
+  })
+})
diff --git a/frontend/components/category-headings.spec.js b/frontend/components/category-headings.spec.js
index c8de2b2556..533c27646d 100644
--- a/frontend/components/category-headings.spec.js
+++ b/frontend/components/category-headings.spec.js
@@ -4,7 +4,7 @@ import { expect } from 'chai'
 import { H3 } from './common'
 import { CategoryHeading, CategoryHeadings } from './category-headings'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 const exampleCategories = [{ id: 'cat', name: 'Example category' }]
 
diff --git a/frontend/components/common.spec.js b/frontend/components/common.spec.js
index fc769a7279..85c32b2622 100644
--- a/frontend/components/common.spec.js
+++ b/frontend/components/common.spec.js
@@ -3,7 +3,7 @@ import { shallow, render } from 'enzyme'
 import { expect } from 'chai'
 import * as common from './common'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 describe('Common modules', function() {
   describe('<GlobalStyle />', function() {
diff --git a/frontend/components/donate.spec.js b/frontend/components/donate.spec.js
index 43f123672b..67135acb53 100644
--- a/frontend/components/donate.spec.js
+++ b/frontend/components/donate.spec.js
@@ -3,7 +3,7 @@ import { shallow, render } from 'enzyme'
 import { expect } from 'chai'
 import Donate from './donate'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 describe('<Donate />', function() {
   it('renders', function() {
diff --git a/frontend/components/footer.spec.js b/frontend/components/footer.spec.js
index 7eebaf3077..0945289617 100644
--- a/frontend/components/footer.spec.js
+++ b/frontend/components/footer.spec.js
@@ -3,7 +3,7 @@ import { shallow, render } from 'enzyme'
 import { expect } from 'chai'
 import Footer from './footer'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 describe('<Footer />', function() {
   it('renders', function() {
diff --git a/frontend/components/header.spec.js b/frontend/components/header.spec.js
index d49522d4be..9f28eae6d4 100644
--- a/frontend/components/header.spec.js
+++ b/frontend/components/header.spec.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
 import { expect } from 'chai'
 import Header from './header'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 describe('<Header />', function() {
   it('renders', function() {
diff --git a/frontend/components/main.spec.js b/frontend/components/main.spec.js
index a94d4923b6..61ceea4643 100644
--- a/frontend/components/main.spec.js
+++ b/frontend/components/main.spec.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import Main from './main'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 describe('<Main />', function() {
   it('renders without a category', function() {
diff --git a/frontend/components/meta.spec.js b/frontend/components/meta.spec.js
index 5e2a52aa94..b9eb73e4f6 100644
--- a/frontend/components/meta.spec.js
+++ b/frontend/components/meta.spec.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
 import { expect } from 'chai'
 import Meta from './meta'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 describe('<Meta />', function() {
   it('renders', function() {
diff --git a/frontend/components/snippet.js b/frontend/components/snippet.js
index 4e98fbed76..b9d8971b78 100644
--- a/frontend/components/snippet.js
+++ b/frontend/components/snippet.js
@@ -23,11 +23,8 @@ const StyledCode = styled.code`
   padding: 0.1em 0.3em;
 
   border-radius: 4px;
-  ${({ withBackground }) =>
-    withBackground !== false &&
-    css`
-      background: #eef;
-    `} font-family: Lekton;
+  background: #eef;
+  font-family: Lekton;
   font-size: ${({ fontSize }) => fontSize};
 
   white-space: nowrap;
diff --git a/frontend/components/snippet.spec.js b/frontend/components/snippet.spec.js
new file mode 100644
index 0000000000..fa539614cf
--- /dev/null
+++ b/frontend/components/snippet.spec.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from 'enzyme'
+import { Snippet } from './snippet'
+
+import '../enzyme-conf.spec'
+
+describe('<Snippet />', function() {
+  it('renders', function() {
+    render(<Snippet snippet="http://example.com/badge.svg" />)
+  })
+
+  it('renders with truncate and fontSize', function() {
+    render(
+      <Snippet
+        fontSize="14pt"
+        snippet="http://example.com/badge.svg"
+        truncate
+      />
+    )
+  })
+})
diff --git a/frontend/components/usage.spec.js b/frontend/components/usage.spec.js
index a2a2cf2c09..a49301af23 100644
--- a/frontend/components/usage.spec.js
+++ b/frontend/components/usage.spec.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
 import { expect } from 'chai'
 import Usage from './usage'
 
-import './enzyme-conf.spec'
+import '../enzyme-conf.spec'
 
 describe('<Usage />', function() {
   it('renders', function() {
diff --git a/frontend/components/enzyme-conf.spec.js b/frontend/enzyme-conf.spec.js
similarity index 100%
rename from frontend/components/enzyme-conf.spec.js
rename to frontend/enzyme-conf.spec.js
diff --git a/frontend/pages/endpoint.spec.js b/frontend/pages/endpoint.spec.js
new file mode 100644
index 0000000000..0681a15f0a
--- /dev/null
+++ b/frontend/pages/endpoint.spec.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import EndpointPage from './endpoint'
+
+import '../enzyme-conf.spec'
+
+describe('<EndpointPage />', function() {
+  it('renders', function() {
+    shallow(<EndpointPage pageContext={{}} />)
+  })
+})
diff --git a/frontend/pages/index.spec.js b/frontend/pages/index.spec.js
new file mode 100644
index 0000000000..70b0eef212
--- /dev/null
+++ b/frontend/pages/index.spec.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import IndexPage from '.'
+
+import '../enzyme-conf.spec'
+
+describe('<IndexPage />', function() {
+  it('renders', function() {
+    shallow(<IndexPage pageContext={{}} />)
+  })
+})