Set up jest (#69)

* 🛠 install jest

* 🧪 add an example test

* 🛠 run tests in CI

* 🐛 add missing GitHub actions property runs-on

* 🐛 add checkout step to test job

* 🐛 install dependencies before running test script

* 🛠 set up jest for gatsby + typescript

* 🧪 stub example mocks + tests

* 🧹 extract utility function

* 🛠 lock upgraded node version

Author: ooloth

.github/workflows/ci.yml

@@ -15,3 +15,13 @@ jobs:
         run: npm run lint
       - name: Format all files
         run: npm run format
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm install
+      - name: Run tests
+        run: npm run test

.nvmrc

@@ -1 +1 @@
-v12.6.0
+v13.2.0

__mocks__/file-mock.js

@@ -0,0 +1,3 @@
+// See: https://www.gatsbyjs.org/docs/unit-testing/#2-creating-a-configuration-file-for-jest
+
+module.exports = 'test-file-stub'

__mocks__/gatsby.js

@@ -0,0 +1,29 @@
+// See: https://www.gatsbyjs.org/docs/unit-testing/#3-useful-mocks-to-complete-your-testing-environment
+
+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,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement('a', {
+        ...rest,
+        href: to,
+      })
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+}

__mocks__/tutorials.js

@@ -0,0 +1,25 @@
+/*
+
+TODO: mock tutorials as they come from YAML
+TODO: mock tutorials as they come from gatsby-node
+
+*/
+
+module.exports = {
+  tutorials: [
+    {
+      authors: ['Owlypixel'],
+      date: 'Nov 22, 2019',
+      fields: {
+        authorsAsString: 'owlypixel',
+        formatsAsString: 'text',
+        topicsAsString: 'themes mdx guitar',
+      },
+      formats: ['text'],
+      link: 'https://owlypixel.com/building-gatsbyjs-theme-from-scratch/',
+      source: 'owlypixel.com',
+      title: 'How to Build a GatsbyJS Guitar-Chords-MDX Theme From Scratch',
+      topics: ['guitar', 'mdx', 'themes'],
+    },
+  ],
+}

gatsby-node.js

@@ -1,26 +1,31 @@
 // 1. Generate string versions of tutorial array fields for faster search
 ///////////////////////////////////////////////////////////////////////////////////
 
+// TODO: unit test this utility
+function convertArrayToString(array) {
+  return array ? array.join(` `).toLowerCase() : ``
+}
+
 exports.onCreateNode = ({ node, actions }) => {
   const { createNodeField } = actions
 
   if (node.internal.type === 'TutorialsYaml') {
     createNodeField({
       node,
       name: `formatsAsString`,
-      value: node.formats ? node.formats.join(` `).toLowerCase() : ``,
+      value: convertArrayToString(node.formats),
     })
 
     createNodeField({
       node,
       name: `topicsAsString`,
-      value: node.topics ? node.topics.join(` `).toLowerCase() : ``,
+      value: convertArrayToString(node.topics),
     })
 
     createNodeField({
       node,
       name: `authorsAsString`,
-      value: node.authors ? node.authors.join(` `).toLowerCase() : ``,
+      value: convertArrayToString(node.authors),
     })
   }
 }
@@ -90,6 +95,8 @@ exports.createPages = async ({ graphql, reporter }) => {
   const { tutorialsWithDates, tutorialsWithoutDates } = result.data
   const tutorials = [...tutorialsWithDates.nodes, ...tutorialsWithoutDates.nodes]
 
+  // TODO: extract repeated patterns into utilities and test them...
+
   // Create a sorted list of all unique formats
   const formatArrays = tutorials.map(tutorial => tutorial.formats)
   const formats = [

jest-preprocess.js

@@ -0,0 +1,7 @@
+// See: https://www.gatsbyjs.org/docs/unit-testing/#2-creating-a-configuration-file-for-jest
+
+const babelOptions = {
+  presets: ['babel-preset-gatsby'],
+}
+
+module.exports = require('babel-jest').createTransformer(babelOptions)

jest.config.js

@@ -0,0 +1,22 @@
+// See: https://www.gatsbyjs.org/docs/unit-testing/
+
+module.exports = {
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.jsx?$': '<rootDir>/jest-preprocess.js',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.([tj]sx?)$',
+  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__/file-mock.js',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testEnvironment: 'jest-environment-jsdom',
+  testPathIgnorePatterns: ['node_modules', '.cache', 'public'],
+  transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
+  globals: {
+    __PATH_PREFIX__: '',
+  },
+  setupFiles: ['<rootDir>/loadershim.js'],
+}

loadershim.js

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