Addresses issue #11 items unit testing, snapshot testing. Follows instructions from https://www.gatsbyjs.com/docs/how-to/testing/unit-testing/ ; Adding typescript config, mocks, snapshot capabilities; initial test for j40footer and snapshot, readme update, test helper for intl plugin (#79)

client/README.md

@@ -20,6 +20,15 @@ To use:
 
 The ruleset is simply the base ruleset + [Google](https://github.com/google/eslint-config-google).
 
+## Testing
+
+This project uses [jest](https://jestjs.io/) for unit testing, using `react-test-renderer` to output to text-based snapshot files.
+
+To run tests: `npm test`
+To rebuild snapshots when you know a component has changed: `npm run test:update`
+
+-
+
 ## Localization
 
 ### About

client/__mocks__/file-mock.js

@@ -0,0 +1,4 @@
+/* This was created following along from
+https://www.gatsbyjs.com/docs/how-to/testing/unit-testing/
+The purpose is to mock static file imports - see jest.config.js */
+module.exports = 'test-file-stub';

client/__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(),
+};

client/jest-preprocess.js

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

client/jest.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[jt]sx?$': '<rootDir>/jest-preprocess.js',
+  },
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
+    // eslint-disable-next-line max-len
+    '.+\\.(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`],
+};

client/loadershim.js

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

client/package.json

@@ -13,6 +13,8 @@
     "build": "gatsby build --prefix-paths",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
+    "test": "jest",
+    "test:update": "npm test -- -u",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "lint": "eslint './src/**/*.{ts,tsx}' --ignore-pattern node_modules/ --ignore-pattern public --ignore-pattern *scss.d.ts",
     "lint:fix": "npm run lint -- --quiet --fix",
@@ -21,11 +23,15 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^4.2.15",
+    "@types/jest": "^26.0.23",
     "@types/node": "^15.3.1",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
+    "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
+    "babel-jest": "^27.0.1",
+    "babel-preset-gatsby": "^1.6.0",
     "eslint": "^7.27.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-react": "^7.23.2",
@@ -34,9 +40,13 @@
     "gatsby-plugin-prettier-eslint": "^1.0.6",
     "gatsby-plugin-sass": "^4.5.0",
     "gh-pages": "^3.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.0.1",
     "prettier": "^2.3.0",
+    "react-test-renderer": "^17.0.2",
     "sass": "^1.33.0",
-    "sass-loader": "^11.1.1"
+    "sass-loader": "^11.1.1",
+    "ts-jest": "^27.0.0"
   },
   "dependencies": {
     "@trussworks/react-uswds": "trussworks/react-uswds#kh-serverside-rendering-fix-1250",

client/src/components/J40Footer.spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import J40Footer from './J40Footer';
+import {LocalizedComponent} from '../test/testHelpers';
+
+describe('J40Footer', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+        .create(<LocalizedComponent><J40Footer /></LocalizedComponent>)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`J40Footer renders correctly 1`] = `
+Array [
+  <footer
+    className="usa-footer"
+  >
+    <div
+      className="usa-footer__primary-section"
+    />
+    <div
+      className="usa-footer__secondary-section"
+    >
+      <div
+        className="grid-container"
+      >
+        <a
+          href="/en/"
+          onClick={[Function]}
+        >
+          Home
+        </a>
+      </div>
+    </div>
+  </footer>,
+  ",",
+]
+`;

client/src/test/testHelpers.tsx

@@ -0,0 +1,16 @@
+import React, {ReactNode} from 'react';
+import {IntlContextProvider} from 'gatsby-plugin-intl';
+
+interface ILocalizedComponentProps {
+  children: ReactNode
+}
+
+export const LocalizedComponent = ({children}: ILocalizedComponentProps) => {
+  return (
+    <>
+      <IntlContextProvider value={{language: 'en', routed: true}}>
+        {children}
+      </IntlContextProvider>,
+    </>
+  );
+};