Add tests

Author: greglobinski

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

jest-preprocess.js

@@ -0,0 +1,20 @@
+const babelOptions = {
+  presets: [
+    '@babel/react',
+    [
+      '@babel/env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-class-properties',
+    'babel-plugin-remove-graphql-queries',
+  ],
+}
+
+module.exports = require('babel-jest').createTransformer(babelOptions)

jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  transform: {
+    '^.+\\.jsx?$': '<rootDir>/jest-preprocess.js',
+  },
+  testRegex: '/.*(__tests__\\/.*)|(.*(test|spec))\\.jsx?$',
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+  },
+  testPathIgnorePatterns: ['node_modules', '.cache'],
+  transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
+  globals: {
+    __PATH_PREFIX__: '',
+  },
+  setupFiles: ['<rootDir>/loadershim.js'],
+  testURL: 'http://localhost/',
+}

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+}

package.json

@@ -19,12 +19,24 @@
     "build": "gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0-beta.55",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.55",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.55",
+    "@babel/preset-env": "^7.0.0-beta.55",
+    "@babel/preset-react": "^7.0.0-beta.55",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^7.1.5",
     "gh-pages": "^1.2.0",
-    "prettier": "^1.13.7"
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^23.4.2",
+    "prettier": "^1.13.7",
+    "react-test-renderer": "^16.4.1",
+    "react-testing-library": "^4.1.5"
   },
   "repository": {
     "type": "git",

src/components/__tests__/counter.test.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import { render, cleanup, fireEvent } from 'react-testing-library'
+import { Provider } from 'unstated'
+import CounterContainer from '../../state/CounterContainer'
+import Counter from '../counter'
+
+afterEach(cleanup)
+
+test('Counter corectly triggers changes in counterContainer', async () => {
+  const counterContainer = new CounterContainer()
+  const { container, getByText } = render(
+    <Provider inject={[counterContainer]}>
+      <Counter />
+    </Provider>
+  )
+
+  await fireEvent(
+    getByText('+'),
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+  )
+  expect(counterContainer.state.count).toBe(1)
+
+  await fireEvent(
+    getByText('-'),
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+  )
+  expect(counterContainer.state.count).toBe(0)
+})
+
+test('Counter corectly triggers methods of counterContainer', async () => {
+  const counterContainer = new CounterContainer()
+  counterContainer.increment = jest.fn()
+  counterContainer.decrement = jest.fn()
+
+  const { container, getByText } = render(
+    <Provider inject={[counterContainer]}>
+      <Counter />
+    </Provider>
+  )
+
+  await fireEvent(
+    getByText('+'),
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+  )
+
+  expect(counterContainer.increment).toHaveBeenCalledTimes(1)
+
+  await fireEvent(
+    getByText('-'),
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+  )
+
+  expect(counterContainer.decrement).toHaveBeenCalledTimes(1)
+})

src/components/counter.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Subscribe } from 'unstated'
+import CounterContainer from '../state/CounterContainer'
+
+const Counter = () => (
+  <Subscribe to={[CounterContainer]}>
+    {counter => (
+      <div
+        style={{
+          margin: '20px 0 0 0',
+          padding: '10px 15px',
+          border: '1px solid black',
+          display: 'flex',
+          justifyContent: 'space-around',
+        }}
+      >
+        <button onClick={() => counter.decrement()}>-</button>
+        <span>Count: {counter.state.count}</span>
+        <button onClick={() => counter.increment()}>+</button>
+      </div>
+    )}
+  </Subscribe>
+)
+
+export default Counter

src/components/layout.js

@@ -2,8 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { StaticQuery, graphql } from 'gatsby'
-import { Subscribe } from 'unstated'
-import CounterContainer from '../state/CounterContainer'
+import Counter from './counter'
 
 import Header from './header'
 import './layout.css'
@@ -39,23 +38,7 @@ const Layout = ({ children, data }) => (
         >
           {children}
 
-          <Subscribe to={[CounterContainer]}>
-            {counter => (
-              <div
-                style={{
-                  margin: '20px 0 0 0',
-                  padding: '10px 15px',
-                  border: '1px solid black',
-                  display: 'flex',
-                  justifyContent: 'space-around',
-                }}
-              >
-                <button onClick={() => counter.decrement()}>-</button>
-                <span>Count: {counter.state.count}</span>
-                <button onClick={() => counter.increment()}>+</button>
-              </div>
-            )}
-          </Subscribe>
+          <Counter />
         </div>
       </>
     )}

src/state/__tests__/CounterContainer.test.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { render, cleanup } from 'react-testing-library'
+import CounterContainer from '../CounterContainer'
+
+afterEach(cleanup)
+
+test('CounterContainer counts correctly', async () => {
+  const counterContainer = new CounterContainer()
+  expect(counterContainer.state.count).toBe(0)
+
+  await counterContainer.increment()
+  expect(counterContainer.state.count).toBe(1)
+
+  await counterContainer.decrement()
+  expect(counterContainer.state.count).toBe(0)
+})