Add example with Jest

Author: Jared Palmer

examples/with-jest/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "backpack-core/babel"
+  ]
+}

examples/with-jest/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+build
+npm-debug.log

examples/with-jest/README.md

@@ -0,0 +1,28 @@
+# Example with Jest
+
+## How to use
+
+Download the example (or clone the whole project)[https://github.com/palmerhq/backpack.git]:
+
+```bash
+curl https://codeload.github.com/palmerhq/backpack/tar.gz/master | tar -xz --strip=2 backpack-master/examples/with-jest
+cd with-jest
+```
+
+Install it and run the tests:
+
+```bash
+npm install
+npm t
+```
+
+## Idea behind the example
+
+This is an example of how to use the Jest test framework with Backpack.
+
+**Points of Interest:**
+
+ - New `.babelrc` file with `presets: ["backpack-core/babel"]`
+ - Adding `babel-jest` and `jest-cli` to devDependencies in `package.json`
+ - Add `"jest"` section to `package.json` to manage Jest configuration
+ - Demonstrates how to do an HTTP test with `supertest-as-promised`

examples/with-jest/__tests__/createServer.test.js

@@ -0,0 +1,21 @@
+/* global it, expect, describe */
+
+import createServer from '../src/createServer'
+import request from 'supertest'
+
+const app = createServer()
+
+describe('Backpack with Jest', () => {
+  it('Object Rest Spread', () => {
+    const hello = { hello: 'world' }
+    const other = {...hello, nice: 'to meet you' }
+
+    expect(other).toEqual({ hello: 'world', nice: 'to meet you'})
+  })
+
+  it('HTTP Request', async () => {
+    const res = await request(app.listen())
+      .get('/')
+    expect(res.status).toBe(200)
+  })
+})

examples/with-jest/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "backpack-examples-with-jest",
+  "version": "0.0.3",
+  "scripts": {
+    "start": "node ./build/server/main.js",
+    "test": "NODE_ENV=test jest",
+    "dev": "backpack dev",
+    "build": "backpack build",
+    "postinstall": "backpack build"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.14.0"
+  },
+  "devDependencies": {
+    "babel-jest": "^18.0.0",
+    "backpack-core": "0.0.3",
+    "jest-cli": "^18.1.0",
+    "supertest": "^2.0.1"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
+    ],
+    "globals": {
+      "__DEV__": true
+    }
+  }
+}

examples/with-jest/src/createServer.js

@@ -0,0 +1,16 @@
+import express from 'express'
+
+export default () => {
+  const app = express()
+
+  app.get('/', async (req, res) => {
+    try {
+      const thing = await Promise.resolve({ one: 'two' }) // async/await!
+      return res.json({...thing, hello: 'world'}) // object-rest-spread!
+    } catch (e) {
+      return res.json({ error: e.message })
+    }
+  })
+
+  return app
+}

examples/with-jest/src/index.js

@@ -0,0 +1,18 @@
+import createServer from './createServer'
+
+const port = process.env.PORT || 3000
+const app = createServer()
+
+app.listen(port, (err) => {
+  if (err) {
+    console.error(err)
+  }
+
+  if (__DEV__) { // webpack flags!
+    console.log('> in development')
+  }
+  console.log(`> listening on port ${port}`)
+})
+
+
+

packages/backpack-core/babel.js

@@ -0,0 +1,47 @@
+const path = require('path')
+
+const preset = {
+  presets: [
+    [require('babel-preset-env').default, {
+      'target': {
+        'node': 'current'
+      },
+      "modules": false
+    }]
+  ],
+  plugins: [
+    // class { handleThing = () => { } }
+    require.resolve('babel-plugin-transform-class-properties'),
+
+    // async => (..)
+    require.resolve('babel-plugin-transform-async-to-generator'),
+
+    // The following two plugins use Object.assign directly, instead of Babel's
+    // extends helper. Note that this assumes `Object.assign` is available.
+    // { ...todo, completed: true }
+    [require.resolve('babel-plugin-transform-object-rest-spread'), {
+      useBuiltIns: true
+    }],
+
+    [require.resolve('babel-plugin-transform-runtime'), {
+      helpers: false,
+      polyfill: false,
+      regenerator: true,
+      // Resolve the Babel runtime relative to the config.
+      moduleName: path.dirname(require.resolve('babel-runtime/package'))
+    }]
+  ]
+}
+
+if (process.env.NODE_ENV || process.env.BABEL_ENV === 'test') {
+  preset.plugins.push.apply(preset.plugins, [
+    // We always include this plugin regardless of environment
+    // because of a Babel bug that breaks object rest/spread without it:
+    // https://github.com/babel/babel/issues/4851
+    require.resolve('babel-plugin-transform-es2015-parameters'),
+    // Jest needs this to work properly with import/export syntax
+    require.resolve('babel-plugin-transform-es2015-modules-commonjs')
+  ])
+}
+
+module.exports = preset

packages/backpack-core/config/webpack.config.js

@@ -3,6 +3,7 @@ const nodeExternals = require('webpack-node-externals')
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const config = require('./paths')
 const path = require('path')
+const babelConfig = require('../babel')
 
 // This is the Webpack configuration.
 // It is focused on developer experience and fast rebuilds.
@@ -74,26 +75,7 @@ module.exports = (options) => ({
           /node_modules/,
           config.buildPath
         ],
-        options: {
-          // babel-preset-env is like autoprefixer, but for javascript.
-          // It efficiently optimizes transpilation based on the specified
-          // target environment. As a default, we set it to target the
-          // user's currently installed Node.js version. We also turn off
-          // ES Modules, and Webpack handles that for us.
-          presets: [
-            [require.resolve('babel-preset-env'), {
-              target: {
-                node: 'current'
-              },
-              modules: false
-            }]
-          ],
-          // These are the default JavaScript language addons.
-          plugins: [
-            require.resolve('babel-plugin-transform-object-rest-spread'),
-            require.resolve('babel-plugin-transform-class-properties')
-          ]
-        }
+        options: babelConfig
       }
     ]
   },
@@ -115,9 +97,10 @@ module.exports = (options) => ({
     // The FriendlyErrorsWebpackPlugin (when combined with source-maps)
     // gives Backpack its human-readable error messages.
     new FriendlyErrorsWebpackPlugin(),
-    // This plugin is awkwardly named. It does not actually swallow errors.
-    // Instead, it just prevents Webpack from printing out compile time
-    // stats to the console.
+    // This plugin is awkwardly named. Use to be called NoErrorsPlugin.
+    // It does not actually swallow errors. Instead, it just prevents
+    // Webpack from printing out compile time stats to the console.
+    // @todo new webpack.NoEmitOnErrorsPlugin()
     new webpack.NoErrorsPlugin()
   ]
 })

packages/backpack-core/package.json

@@ -10,17 +10,22 @@
   "dependencies": {
     "babel-core": "^6.21.0",
     "babel-loader": "^6.2.10",
+    "babel-plugin-transform-async-to-generator": "^6.16.0",
     "babel-plugin-transform-class-properties": "^6.19.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
+    "babel-plugin-transform-es2015-parameters": "^6.21.0",
     "babel-plugin-transform-object-rest-spread": "^6.20.2",
+    "babel-plugin-transform-runtime": "^6.15.0",
     "babel-polyfill": "^6.20.0",
     "babel-preset-env": "^1.1.4",
     "chokidar": "^1.6.1",
     "cross-spawn": "^5.0.1",
+    "dotenv": "^4.0.0",
     "friendly-errors-webpack-plugin": "^1.1.2",
     "nodemon": "^1.11.0",
     "ramda": "^0.23.0",
     "source-map-support": "^0.4.8",
-    "webpack": "2.2.0-rc.3",
+    "webpack": "^2.2.0-rc.3",
     "webpack-node-externals": "^1.5.4"
   }
 }