next-starter.md

Next Starter

Get Started

Run from a new project folder:

curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/next-starter.sh | sh

next-starter.sh

#!/bin/sh

# Start with node-starter
curl https://gist.githubusercontent.com/eezing/6aa3b59137260916ea7fdd4040faa72a/raw/node-starter.sh | sh

# Clean up after node-starter
rm -rf src
rm -rf coverage

# Create directories
mkdir pages
mkdir components
mkdir components/__tests__

# Download files
curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/root_pages_index.js --output pages/index.js
curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/root_components_HelloWorld.js --output components/HelloWorld.js
curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/root_components___tests___HelloWorld.test.js --output components/__tests__/HelloWorld.test.js
curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/root_jest.setup.js --output jest.setup.js
curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/root_jest.config.js --output jest.config.js
curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/root_.babelrc --output .babelrc

# Merge pkg files
NODE_PKG=$(cat package.json)
NEXT_PKG=$(curl https://gist.githubusercontent.com/eezing/ea49045bb27401b3d2356e5f4c7eec92/raw/root_package.json)
PKG_COLLECTION="[""$NODE_PKG"",""$NEXT_PKG""]"
curl -X POST -H "Content-Type: application/json" -d "$PKG_COLLECTION" https://merge-json-hkg9xtnd6izp.runkit.sh --output package.json

# Install packages
npm install --save \
  next@6 \
  react@16 \
  react-dom@16 \

npm install --save-dev \
  enzyme \
  enzyme-adapter-react-16 \
  react-test-renderer \
  [email protected]

# Clean up
npm run pretty

# Run tests to create snapshots
npm test

# Commit
git add -A
git commit -m "Next scaffolding"

root_.babelrc

{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}

root_components___tests___HelloWorld.test.js

import { shallow } from 'enzyme';
import React from 'react';
import renderer from 'react-test-renderer';
import HelloWorld from '../HelloWorld.js';

describe('With Enzyme', () => {
  it('HelloWorld shows "hello world!"', () => {
    const result = shallow(<HelloWorld />);
    expect(result.find('h1').text()).toEqual('hello world!');
  });
});

describe('With Snapshot Testing', () => {
  it('HelloWorld shows "hello world!"', () => {
    const component = renderer.create(<HelloWorld />);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

root_components_HelloWorld.js

import React from 'react';

const HelloWorld = () => <h1>hello world!</h1>;

export default HelloWorld;

root_jest.config.js

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/']
}

root_jest.setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

root_package.json

{
  "scripts": {
    "start": "next start",
    "build": "next build",
    "dev": "next"
  }
}

root_pages_index.js

import React from 'react';
import HelloWorld from '../components/HelloWorld';

const IndexPage = () => (
  <div>
    <HelloWorld />
  </div>
);

export default IndexPage;