fix: unit test issues

* Add jest configuration
* Downgrade jest, since higher version have breaking changes that do not
  work with our current testing setup
* Remove module.exports and requires, when not needed
* Remove babel/preset-env since it is no longer needed

jest-preprocess.js

@@ -0,0 +1,3 @@
+module.exports = require('babel-jest').createTransformer({
+  presets: ['babel-preset-gatsby', '@emotion/babel-preset-css-prop'],
+});

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  transform: {
+    '^.+\\.js$': '<rootDir>/jest-preprocess.js',
+  },
+  testPathIgnorePatterns: ['node_modules', '\\.cache/'],
+  globals: {
+    __PATH_PREFIX__: '',
+  },
+  transformIgnorePatterns: ['node_modules/(?!(gatsby||gatsby-plugin-mdx)/)'],
+  setupFiles: ['<rootDir>/loadershim.js'],
+  setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
+  moduleNameMapper: {
+    '^@reach/router(.*)': '<rootDir>/node_modules/@gatsbyjs/reach-router$1',
+    '^gatsby-page-utils/(.*)$': `gatsby-page-utils/dist/$1`,
+  },
+};

loadershim.js

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

package.json

@@ -20,6 +20,7 @@
     "test": "jest -i"
   },
   "dependencies": {
+    "@emotion/jest": "^11.9.1",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
     "@mdx-js/mdx": "^1.6.19",
@@ -53,16 +54,18 @@
     "use-query-params": "^1.2.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.17.12",
     "@newrelic/eslint-plugin-newrelic": "^0.3.1",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^8.0.4",
     "@semantic-release/release-notes-generator": "^10.0.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/react-hooks": "^8.0.0",
     "babel-jest": "^26.0.1",
     "babel-preset-gatsby": "^1.0.0",
-    "jest": "^28.1.0",
+    "jest": "^26.4.0",
     "prettier": "2.2.1"
   }
 }

setup-test-env.js

@@ -0,0 +1,12 @@
+/* global expect */
+import { createSerializer, matchers } from '@emotion/jest';
+import * as emotion from '@emotion/react';
+import '@testing-library/jest-dom';
+
+expect.extend(matchers);
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+global.ResizeObserver = class ResizeObserver {
+  observe = jest.fn();
+  disconnect = jest.fn();
+};

src/utils/__tests__/parseHelpers.test.js

@@ -1,5 +1,5 @@
-const parseHelpers = require('../preview/parseHelpers');
-const {
+import * as parseHelpers from '../preview/parseHelpers';
+import {
   expectedConfigOutput,
   missingConfigOutput,
   configContentMissingFields,
@@ -12,9 +12,7 @@ const {
   installPlansOutput,
   documentationInput,
   documentationOutput,
-} = require('../mock_data/content');
-
-console.log(baseFiles);
+} from '../mock_data/content';
 
 describe('parseHelpers', () => {
   afterEach(() => {

src/utils/mock_data/content.js

@@ -1,9 +1,9 @@
-const installPlansContent = `
+export const installPlansContent = `
 installPlans:
   - guided-install
 `;
 
-const configContent = `
+export const configContent = `
 id: generic-quickstart-id-1
 slug: quickstart-slug
 description: example description 
@@ -20,7 +20,7 @@ keywords:
 ${installPlansContent}
 `;
 
-const configContentMissingFields = `
+export const configContentMissingFields = `
 id: generic-quickstart-id-1
 slug: quickstart-slug
 description: example description 
@@ -35,19 +35,19 @@ keywords:
 ${installPlansContent}
 `;
 
-const dashboardContent = {
+export const dashboardContent = {
   name: 'mock dashboard name',
   description: 'mock dashboard description',
 };
 
-const missingConfigOutput = {
+export const missingConfigOutput = {
   title: 'Generic Quickstart',
   summary: 'example summary',
 };
 
-const installPlansInput = ['guided-install'];
+export const installPlansInput = ['guided-install'];
 
-const documentationInput = [
+export const documentationInput = [
   {
     name: 'Kamon installation docs',
     description:
@@ -57,7 +57,7 @@ const documentationInput = [
   },
 ];
 
-const documentationOutput = [
+export const documentationOutput = [
   {
     name: 'Kamon installation docs',
     description:
@@ -67,14 +67,14 @@ const documentationOutput = [
   },
 ];
 
-const installPlansOutput = [
+export const installPlansOutput = [
   {
     name: '',
     id: 'guided-install',
   },
 ];
 
-const expectedConfigOutput = {
+export const expectedConfigOutput = {
   title: 'Generic Quickstart',
   name: 'quickstart-slug',
   description: 'example description',
@@ -92,7 +92,7 @@ const expectedConfigOutput = {
   installPlans: installPlansOutput,
 };
 
-const baseFiles = (content) => [
+export const baseFiles = (content) => [
   {
     type: 'yaml',
     filePath: 'mock_quickstart_1/config.yml',
@@ -107,7 +107,7 @@ const baseFiles = (content) => [
   },
 ];
 
-const dashboardFiles = (content) => [
+export const dashboardFiles = (content) => [
   {
     type: 'json',
     filePath:
@@ -131,7 +131,7 @@ const dashboardFiles = (content) => [
   },
 ];
 
-const expectedDashboardOutput = [
+export const expectedDashboardOutput = [
   {
     name: 'mock dashboard name',
     description: 'mock dashboard description',
@@ -141,19 +141,3 @@ const expectedDashboardOutput = [
     ],
   },
 ];
-
-module.exports = {
-  installPlansContent,
-  configContent,
-  configContentMissingFields,
-  dashboardContent,
-  expectedConfigOutput,
-  missingConfigOutput,
-  baseFiles,
-  dashboardFiles,
-  expectedDashboardOutput,
-  installPlansInput,
-  installPlansOutput,
-  documentationInput,
-  documentationOutput,
-};

src/utils/preview/parseHelpers.js

@@ -1,10 +1,11 @@
-const yaml = require('js-yaml');
-const QUICKSTART_REPO_URL = require('../../data/constants').QUICKSTART_REPO_URL;
+import * as yaml from 'js-yaml';
+import { QUICKSTART_REPO_URL } from '../../data/constants';
+
 /**
  * @typedef {import('./fetchHelpers').FileMetadata} FileMetadata
  */
 
-const parseDocs = (docs) => {
+export const parseDocs = (docs) => {
   const parsedDocs = docs.map((doc) => {
     doc.description = doc.description?.trim();
     return doc;
@@ -13,7 +14,7 @@ const parseDocs = (docs) => {
   return parsedDocs;
 };
 
-const parseInstallPlans = (installPlans) => {
+export const parseInstallPlans = (installPlans) => {
   const parsedInstallPlans = installPlans.map((planId) => {
     const installPlan = {
       id: planId,
@@ -29,7 +30,7 @@ const parseInstallPlans = (installPlans) => {
  * @param {FileMetadata[]} - quickstartFiles
  * @returns {Object} A quickstart object to be rendered by QuickstartDetails
  */
-const parseQuickstartFiles = (quickstartFiles) => {
+export const parseQuickstartFiles = (quickstartFiles) => {
   const quickstartContent = {};
 
   const config = quickstartFiles.find(
@@ -38,7 +39,9 @@ const parseQuickstartFiles = (quickstartFiles) => {
 
   //build the packUrl since it is not part of the raw github file contents
   //assumes the filePath is always directly under 'quickstarts/'
-  const packUrl = `${QUICKSTART_REPO_URL}/${config.filePath.split('/config')[0]}`;
+  const packUrl = `${QUICKSTART_REPO_URL}/${
+    config.filePath.split('/config')[0]
+  }`;
 
   let loadYaml = yaml.load(config.content);
 
@@ -50,23 +53,28 @@ const parseQuickstartFiles = (quickstartFiles) => {
   });
 
   const parsedQuickstartDocs =
-    loadYaml?.documentation?.length > 0 ? parseDocs(loadYaml.documentation) : [];
+    loadYaml?.documentation?.length > 0
+      ? parseDocs(loadYaml.documentation)
+      : [];
   const parsedInstallPlans =
     loadYaml?.installPlans?.length > 0
       ? parseInstallPlans(loadYaml.installPlans)
       : [];
 
   quickstartContent.authors = loadYaml?.authors ?? ['Placeholder author'];
-  quickstartContent.description = loadYaml?.description?.trim() ?? 'Placeholder description';
+  quickstartContent.description =
+    loadYaml?.description?.trim() ?? 'Placeholder description';
   quickstartContent.documentation = parsedQuickstartDocs;
   quickstartContent.id = loadYaml?.id ?? '';
   quickstartContent.installPlans = parsedInstallPlans;
   quickstartContent.keywords = loadYaml?.keywords ?? ['Placeholder keyword'];
-  quickstartContent.level = loadYaml?.level.replace(' ', '_').toUpperCase() ?? 'COMMUNITY';
+  quickstartContent.level =
+    loadYaml?.level.replace(' ', '_').toUpperCase() ?? 'COMMUNITY';
   quickstartContent.name = loadYaml?.slug ?? '';
   quickstartContent.packUrl = packUrl ?? '';
   quickstartContent.relatedResources = []; //we don't get these from the config.yml
-  quickstartContent.summary = loadYaml?.summary?.trim() ?? 'Placeholder summary';
+  quickstartContent.summary =
+    loadYaml?.summary?.trim() ?? 'Placeholder summary';
   quickstartContent.title = loadYaml?.title ?? 'Placeholder title';
 
   return quickstartContent;
@@ -77,7 +85,7 @@ const parseQuickstartFiles = (quickstartFiles) => {
  * @param {FileMetadata[]}
  * @returns {Object[]} An array of quickstart dashboard objects, Ex: { name: '', description: '', screenshots: [''] }
  */
-const parseDashboardFiles = (files) => {
+export const parseDashboardFiles = (files) => {
   const configs = files.filter((d) => d.filePath.includes('.json'));
   const screenshots = files.filter((d) => !d.filePath.includes('.json'));
   return configs.map((dashFileMetadata) => {
@@ -104,7 +112,7 @@ const parseDashboardFiles = (files) => {
  * @param {FileContent[]} alertFiles - alert config files
  * @returns {Object[]} Ex: { details: '', name: '', type: '' }
  */
-const parseAlertFiles = (alertFiles) => {
+export const parseAlertFiles = (alertFiles) => {
   return alertFiles.map((file) => {
     const loadYaml = yaml.load(file.content);
 
@@ -122,7 +130,7 @@ const parseAlertFiles = (alertFiles) => {
  * @param {FileMetadata[]} rawFiles - An array of FileContents for a particular quickstart
  * @returns {Object} A quickstart object ready for display within the `QuickstartDetails` component.
  */
-const parseRawQuickstartFiles = (rawFiles) => {
+export const parseRawQuickstartFiles = (rawFiles) => {
   let dashboardFiles = [];
   let alertFiles = [];
   let quickstartDirs = {};
@@ -148,12 +156,3 @@ const parseRawQuickstartFiles = (rawFiles) => {
   //merge together the parsed quickstart content and the alerts/dashboard arrrays
   return { ...quickstartDirs, ...quickstart };
 };
-
-module.exports = {
-  parseDocs,
-  parseInstallPlans,
-  parseQuickstartFiles,
-  parseDashboardFiles,
-  parseAlertFiles,
-  parseRawQuickstartFiles,
-};