setup testing

.eslintrc

@@ -16,7 +16,8 @@
   "env": {
     "browser": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "rules": {
     "quotes": ["error", "single"],

.gitignore

@@ -12,3 +12,4 @@ yarn.lock
 package-lock.json
 plugins/gatsby-plugin-matomo
 src/components/svg
+coverage

jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  transform: {
+    '^.+\\.jsx?$': '<rootDir>/jest/jest-preprocess.js'
+  },
+  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>/jest/__mocks__/file-mock.js'
+  },
+  testPathIgnorePatterns: ['node_modules', '.cache', 'public', 'coverage'],
+  transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
+  globals: {
+    __PATH_PREFIX__: ''
+  },
+  testURL: 'http://localhost',
+  setupFiles: ['<rootDir>/jest/loadershim.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest/setup-test-env.js']
+}

jest/__mocks__/file-mock.js

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

jest/__mocks__/gatsby.js

@@ -0,0 +1,26 @@
+const React = require('react')
+const gatsby = jest.requireActual('gatsby')
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement('a', {
+        ...rest,
+        href: to
+      })
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn()
+}

jest/jest-preprocess.js

@@ -0,0 +1,5 @@
+const babelOptions = {
+  presets: ['babel-preset-gatsby']
+}
+
+module.exports = require('babel-jest').createTransformer(babelOptions)

jest/loadershim.js

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

jest/setup-test-env.js

@@ -0,0 +1,4 @@
+import 'jest-dom/extend-expect'
+
+// this is basically: afterEach(cleanup)
+import 'react-testing-library/cleanup-after-each'

package.json

@@ -17,7 +17,7 @@
     "dev": "./node_modules/gatsby/dist/bin/gatsby.js develop --host 0.0.0.0",
     "format": "prettier --write 'src/**/*.{js,jsx}'",
     "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
-    "test": "npm run lint",
+    "test": "npm run lint && jest --coverage",
     "deploy": "./scripts/deploy.sh",
     "new": "babel-node ./scripts/new.js"
   },
@@ -60,16 +60,22 @@
     "@babel/preset-env": "^7.4.3",
     "@svgr/webpack": "^4.2.0",
     "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.7.1",
+    "babel-preset-gatsby": "^0.1.11",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-loader": "^2.1.2",
     "eslint-plugin-graphql": "^3.0.3",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^24.7.1",
+    "jest-dom": "^3.1.3",
     "ora": "^3.4.0",
     "prepend": "^1.0.2",
     "prettier": "^1.17.0",
     "prettier-stylelint": "^0.4.2",
+    "react-testing-library": "^6.1.2",
     "slugify": "^1.3.4",
     "stylelint": "^10.0.0",
     "stylelint-config-css-modules": "^1.3.0",

src/components/atoms/Button.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from 'react-testing-library'
+
+import Button from './Button'
+
+describe('Button', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Button href="/somewhere">Hello</Button>)
+
+    expect(getByText('Hello').nodeName).toBe('A')
+  })
+
+  it('renders children', () => {
+    const children = <span>Hello World</span>
+    const { getByText } = render(<Button href="/children">{children}</Button>)
+
+    expect(getByText('Hello World')).toBeDefined()
+  })
+})