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

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,