diff --git a/packages/gatsby-plugin-typography/package.json b/packages/gatsby-plugin-typography/package.json
index a3bed31f81c35..787fe06fc253a 100644
--- a/packages/gatsby-plugin-typography/package.json
+++ b/packages/gatsby-plugin-typography/package.json
@@ -14,6 +14,8 @@
     "@babel/core": "^7.0.0",
     "babel-preset-gatsby-package": "^0.1.4",
     "cross-env": "^5.1.4",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-typography": "^0.16.18",
     "typography": "^0.16.18"
   },
@@ -28,6 +30,8 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^2.0.0",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "react-typography": "^0.16.1 || ^1.0.0-alpha.0",
     "typography": "^0.16.0 || ^1.0.0-alpha.0"
   },
diff --git a/packages/gatsby-plugin-typography/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-typography/src/__tests__/gatsby-browser.js
index c4c736b138b1e..3ff0eb521ff67 100644
--- a/packages/gatsby-plugin-typography/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-typography/src/__tests__/gatsby-browser.js
@@ -1,48 +1,44 @@
 import React from "react"
-import * as path from "path"
-import { existsSync, mkdirSync, writeFileSync, unlinkSync, rmdirSync } from "fs"
 
-const cacheDir = path.join(__dirname, `../.cache`)
+jest.mock(`react-typography`, () => {
+  return {
+    GoogleFont: () => <link />,
+  }
+})
 
-describe(`gatsby-plugin-typography`, () => {
-  let onClientEntry
-  beforeAll(() => {
-    jest.mock(`react-typography`, () => {
+const mockTypographyCache = (googleFonts = [`Roboto`]) => {
+  jest.doMock(
+    `../.cache/typography`,
+    () => {
       return {
-        GoogleFont: () => <link />,
+        injectStyles: () => {},
+        options: {
+          googleFonts: [].concat(googleFonts),
+        },
       }
-    })
-    process.env.BUILD_STAGE = `develop`
-
-    if (!existsSync(cacheDir)) {
-      mkdirSync(cacheDir)
-    }
+    },
+    { virtual: true }
+  )
+}
 
-    writeFileSync(`${cacheDir}/typography.js`, `module.exports = {}`)
+describe(`gatsby-plugin-typography`, () => {
+  beforeAll(() => {
+    process.env.BUILD_STAGE = `develop`
   })
 
   afterAll(() => {
-    process.env.BUILD_STAGE = `develop`
-
-    unlinkSync(`${cacheDir}/typography.js`)
-    rmdirSync(cacheDir)
+    delete process.env.BUILD_STAGE
   })
 
   beforeEach(() => {
-    Array.from(global.document.head.children).forEach(child => child.remove())
     jest.resetModules()
-    jest.mock(`../.cache/typography`, () => {
-      return {
-        injectStyles: () => {},
-        options: {
-          googleFonts: [`Roboto`],
-        },
-      }
-    })
+    jest.resetAllMocks()
+    Array.from(global.document.head.children).forEach(child => child.remove())
+    mockTypographyCache()
   })
 
   it(`should render googlefonts`, () => {
-    onClientEntry = require(`../gatsby-browser`).onClientEntry
+    const onClientEntry = require(`../gatsby-browser`).onClientEntry
     onClientEntry(null, {})
 
     const link = document.querySelector(`[data-gatsby-typography]`)
@@ -50,7 +46,7 @@ describe(`gatsby-plugin-typography`, () => {
   })
 
   it(`shouldn't render googlefonts when omitGoogleFonts is true`, () => {
-    onClientEntry = require(`../gatsby-browser`).onClientEntry
+    const onClientEntry = require(`../gatsby-browser`).onClientEntry
     onClientEntry(null, {
       omitGoogleFont: true,
     })
@@ -60,15 +56,8 @@ describe(`gatsby-plugin-typography`, () => {
   })
 
   it(`shouldn't render googlefonts when no fonts are set`, () => {
-    jest.mock(`../.cache/typography`, () => {
-      return {
-        injectStyles: () => {},
-        options: {
-          googleFonts: [],
-        },
-      }
-    })
-    onClientEntry = require(`../gatsby-browser`).onClientEntry
+    mockTypographyCache([])
+    const onClientEntry = require(`../gatsby-browser`).onClientEntry
     onClientEntry(null, {})
 
     const link = document.querySelector(`[data-gatsby-typography]`)
diff --git a/packages/gatsby-plugin-typography/src/__tests__/gatsby-ssr.js b/packages/gatsby-plugin-typography/src/__tests__/gatsby-ssr.js
index 75e00384ef0d1..9c836f0f2c452 100644
--- a/packages/gatsby-plugin-typography/src/__tests__/gatsby-ssr.js
+++ b/packages/gatsby-plugin-typography/src/__tests__/gatsby-ssr.js
@@ -1,3 +1,5 @@
+import { onPreRenderHTML, onRenderBody } from "../gatsby-ssr"
+
 jest.mock(
   `../.cache/typography`,
   () => {
@@ -6,8 +8,6 @@ jest.mock(
   { virtual: true }
 )
 
-import { onPreRenderHTML, onRenderBody } from "../gatsby-ssr"
-
 const clone = arr => arr.reduce((merged, item) => merged.concat(item), [])
 
 describe(`onRenderBody`, () => {
diff --git a/packages/gatsby-plugin-typography/src/gatsby-browser.js b/packages/gatsby-plugin-typography/src/gatsby-browser.js
index 78be662204ed6..9cfe4b558cfdc 100644
--- a/packages/gatsby-plugin-typography/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-typography/src/gatsby-browser.js
@@ -10,7 +10,7 @@ if (process.env.BUILD_STAGE === `develop`) {
   React = require(`react`)
   GoogleFont = require(`react-typography`).GoogleFont
   // typography links to the file set in "pathToConfigModule"
-  const typographyConfig = require(`./.cache/typography.js`)
+  const typographyConfig = require(`./.cache/typography`)
   typography = typographyConfig.default || typographyConfig
 
   exports.onClientEntry = (a, pluginOptions) => {
diff --git a/yarn.lock b/yarn.lock
index f9d1d1596dfc6..573615c1deac7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17257,6 +17257,16 @@ react-dom@^16.4.1:
     prop-types "^15.6.2"
     schedule "^0.4.0"
 
+react-dom@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.6"
+
 react-error-overlay@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
@@ -17304,6 +17314,16 @@ react@^16.4.1:
     prop-types "^15.6.2"
     schedule "^0.4.0"
 
+react@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.6"
+
 read-chunk@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-1.0.1.tgz#5f68cab307e663f19993527d9b589cace4661194"
@@ -18495,6 +18515,14 @@ schedule@^0.4.0:
   dependencies:
     object-assign "^4.1.1"
 
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.0, schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"