Automatic file validation for components in src/pages (#3881)

* yarn.lock

* add page validation and fix breaking createPage action tests

* Improve error messages for invalid pages

Author: mhd-sln

package.json

@@ -27,8 +27,8 @@
     "eslint-plugin-react": "^7.3.0",
     "flow-bin": "^0.42.0",
     "glob": "^7.1.1",
-    "jest": "^20.0.4",
-    "jest-cli": "^20.0.4",
+    "jest": "^22.1.4",
+    "jest-cli": "^22.1.4",
     "lerna": "^2.1.1",
     "npm-run-all": "4.1.2",
     "plop": "^1.8.1",

packages/gatsby/__mocks__/fs.js

@@ -0,0 +1,17 @@
+'use strict'
+
+const fs = jest.genMockFromModule(`fs`)
+
+let mockFiles = {}
+function __setMockFiles(newMockFiles) {
+  mockFiles = Object.assign({}, newMockFiles)
+}
+
+function readFileSync(filePath, parser) {
+  return mockFiles[filePath]
+}
+
+fs.__setMockFiles = __setMockFiles
+fs.readFileSync = readFileSync
+
+module.exports = fs

packages/gatsby/src/redux/__tests__/pages.js

@@ -1,14 +1,29 @@
+'use strict'
+
+const glob = require(`glob`)
 const reducer = require(`../reducers/pages`)
-const { actions } = require(`../actions`)
+
+jest.mock(`fs`)
 
 Date.now = jest.fn(
   () =>
     // const diff = new Date().getTime() - start
     1482363367071 // + diff
 )
 
+glob.sync = jest.fn(() => ``)
+
 describe(`Add pages`, () => {
-  it(`allows you to add pages`, () => {
+  const MOCK_FILE_INFO = {
+    '/whatever/index.js': `import React from 'react'; export default Page;`,
+    '/whatever2/index.js': `import React from 'react'; export default Page;`,
+  }
+  beforeEach(() => {
+    // Set up some mocked out file info before each test
+    require(`fs`).__setMockFiles(MOCK_FILE_INFO)
+  })
+  test(`allows you to add pages`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/hi/`,
@@ -22,16 +37,18 @@ describe(`Add pages`, () => {
   })
 
   it(`Fails if path is missing`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
-        component: `/whatever/index.js`,
+        component: `/path/to/file1.js`,
       },
       { id: `test`, name: `test` }
     )
     expect(action).toMatchSnapshot()
   })
 
   it(`Fails if component path is missing`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/whatever/`,
@@ -42,6 +59,7 @@ describe(`Add pages`, () => {
   })
 
   it(`Fails if the component path isn't absolute`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/whatever/`,
@@ -53,6 +71,7 @@ describe(`Add pages`, () => {
   })
 
   it(`adds an initial forward slash if the user doesn't`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `hi/`,
@@ -65,6 +84,7 @@ describe(`Add pages`, () => {
   })
 
   it(`allows you to add pages with context`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/hi/`,
@@ -81,6 +101,7 @@ describe(`Add pages`, () => {
   })
 
   it(`allows you to add pages with matchPath`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/hi/`,
@@ -95,6 +116,7 @@ describe(`Add pages`, () => {
   })
 
   it(`allows you to add multiple pages`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/hi/`,
@@ -116,6 +138,7 @@ describe(`Add pages`, () => {
   })
 
   it(`allows you to update existing pages (based on path)`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/hi/`,
@@ -140,6 +163,7 @@ describe(`Add pages`, () => {
   })
 
   it(`allows you to delete paths`, () => {
+    const { actions } = require(`../actions`)
     const action = actions.createPage(
       {
         path: `/hi/`,

packages/gatsby/src/redux/actions.js

@@ -6,7 +6,7 @@ const { bindActionCreators } = require(`redux`)
 const { stripIndent } = require(`common-tags`)
 const glob = require(`glob`)
 const path = require(`path`)
-
+const fs = require(`fs`)
 const { joinPath } = require(`../utils/path`)
 const {
   getNode,
@@ -187,6 +187,72 @@ actions.createPage = (page: PageInput, plugin?: Plugin, traceId?: string) => {
     return null
   }
 
+  // Validate that the page component imports React and exports something
+  // (hopefully a component).
+  if (!internalPage.component.includes(`/.cache/`)) {
+    const fileContent = fs.readFileSync(internalPage.component, `utf-8`)
+    let notEmpty = true
+    let includesReactImport = true
+    let includesDefaultExport = true
+
+    if (fileContent === ``) {
+      notEmpty = false
+    }
+
+    if (!fileContent.includes(`React`)) {
+      includesReactImport = false
+    }
+    if (
+      !fileContent.includes(`export default`) &&
+      !fileContent.includes(`module.exports`)
+    ) {
+      includesDefaultExport = false
+    }
+    if (!notEmpty || !includesDefaultExport || !includesReactImport) {
+      const relativePath = path.relative(
+        store.getState().program.directory,
+        internalPage.component
+      )
+
+      if (!notEmpty) {
+        console.log(``)
+        console.log(
+          `You have an empty file in the "src/pages" directory at "${relativePath}". Please remove it or make it a valid component`
+        )
+        console.log(``)
+        process.exit(1)
+      }
+
+      console.log(``)
+      console.log(``)
+      console.log(
+        `The page component at "${relativePath}" didn't pass validation`
+      )
+
+      if (!includesReactImport) {
+        console.log(``)
+        console.log(
+          `You must import React at the top of the file for a React component to be valid`
+        )
+        console.log(``)
+        console.log(`Add the following to the top of the component:`)
+        console.log(``)
+        console.log(`    import React from 'react'`)
+        console.log(``)
+      }
+
+      if (!includesDefaultExport) {
+        console.log(``)
+        console.log(
+          `The page component must export a React component for it to be valid`
+        )
+        console.log(``)
+      }
+
+      process.exit(1)
+    }
+  }
+
   return {
     type: `CREATE_PAGE`,
     plugin,