test: add testing framework

Author: thecodingwizard

__mocks__/gatsby.js

@@ -0,0 +1,27 @@
+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(),
+};

jest-preprocess.js

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

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  transform: {
+    '^.+\\.[jt]sx?$': `<rootDir>/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>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  testURL: `http://localhost`,
+  setupFiles: [`<rootDir>/loadershim.js`],
+};

loadershim.js

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

package.json

@@ -91,12 +91,19 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "babel-jest": "^26.6.3",
+    "babel-preset-gatsby": "^0.8.0",
     "firebase-admin": "^9.2.0",
     "firestore-export-import": "^0.8.0",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.11",
     "husky": "^4.2.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
     "lint-staged": "^10.2.11",
-    "prettier": "^2.0.5"
+    "prettier": "^2.0.5",
+    "react-test-renderer": "^17.0.1"
   },
   "license": "MIT",
   "scripts": {
@@ -107,7 +114,7 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "check-links": "blc http://localhost:9000 -qorf --exclude train.usaco.org --exclude quora.com --exclude tablesgenerator.com --exclude judge.yosupo.jp --exclude kenkoooo.com --requests 10",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "jest",
     "functions:deploy": "firebase deploy --only functions"
   },
   "repository": {

src/pages/__tests__/liveupdate.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import LiveUpdate from '../LiveUpdate';
+
+jest.mock('../../components/layout', () => {
+  return jest.fn(({ children }) => (
+    <div data-testid="mocked-layout">{children}</div>
+  ));
+});
+jest.mock('../../components/seo', () => {
+  return jest.fn(() => null);
+});
+jest.mock('../../components/TopNavigationBar/TopNavigationBar', () => {
+  return jest.fn(() => null);
+});
+
+describe('Live Update', () => {
+  /*
+   * To speed up build times, someone can comment out the LiveUpdate page
+   * and replace it with a placeholder. This test ensures that they
+   * remember to uncomment the page before deploying.
+   */
+  it('does not render the placeholder content', () => {
+    const { getByTestId } = render(<LiveUpdate />);
+    expect(getByTestId('mocked-layout')).toBeTruthy();
+  });
+});