[UIE-136] Build test utils package (#4294)

Author: nawatts

.pnp.cjs

@@ -1,16 +1,21 @@
-import { baseConfig } from '@terra-ui-packages/test-utils';
+import { getJestConfig } from '@terra-ui-packages/test-utils';
+
+const baseConfig = getJestConfig();
 
 export default {
   ...baseConfig,
-  'reporters': [
+  reporters: [
     'default',
-    ['jest-html-reporter', {
-      'pageTitle': 'Test Report',
-      'sort': 'status',
-      'includeFailureMsg': true,
-      'includeSuiteFailure': true,
-      "outputPath": "test-report/index.html",
-    }]
+    [
+      'jest-html-reporter',
+      {
+        pageTitle: 'Test Report',
+        sort: 'status',
+        includeFailureMsg: true,
+        includeSuiteFailure: true,
+        outputPath: 'test-report/index.html',
+      },
+    ],
   ],
   setupFilesAfterEnv: [...baseConfig.setupFilesAfterEnv, '<rootDir>/src/setupTests.ts'],
 };

.yarn/cache/@types-node-npm-20.6.2-bff5d8378f-96fe530387.zip

@@ -67,7 +67,7 @@
     "analyze": "yarn build && source-map-explorer 'build/static/js/*.js' --gzip",
     "build": "yarn build-packages && yarn build-app",
     "build-app": "tsc && yarn save-build-info && vite build && rm build/config.json",
-    "build-packages": "yarn workspaces foreach --include '@terra-ui-packages/*' --parallel run build",
+    "build-packages": "yarn workspaces foreach --include '@terra-ui-packages/*' --parallel --topological-dev run build",
     "lint": "eslint --fix --max-warnings=0 .",
     "optimize-image-svgs": "svgo --enable=inlineStyles,prefixIds --config '{ \"plugins\": [ { \"inlineStyles\": { \"onlyMatchedOnce\": false } }] }' --pretty -f src/images -r -p 1 --multipass",
     "preinstall": "node .hooks/check-engine-light.js",

jest.config.mjs

@@ -1,6 +1,6 @@
 // ESLint thinks @terra-ui-packages/test-utils should be listed in dependencies instead of devDependencies.
 // TODO: Fix this in ESLint configuration.
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { baseConfig } from '@terra-ui-packages/test-utils';
+import { getJestConfig } from '@terra-ui-packages/test-utils';
 
-export default baseConfig;
+export default getJestConfig();

package.json

@@ -1,10 +1,11 @@
+import { withFakeTimers } from '@terra-ui-packages/test-utils';
 import { act, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { button, h } from 'react-hyperscript-helpers';
 
 import { icon } from './icon';
 import { getPopupRoot } from './internal/PopupPortal';
-import { renderWithTheme, withFakeTimers } from './internal/test-utils';
+import { renderWithTheme } from './internal/test-utils';
 import { TooltipTrigger, TooltipTriggerProps } from './TooltipTrigger';
 
 describe('TooltipTrigger', () => {

packages/components/jest.config.mjs

@@ -31,21 +31,3 @@ export const TestThemeProvider = (props) => {
 export const renderWithTheme = (ui: ReactElement) => {
   return render(ui, { wrapper: TestThemeProvider });
 };
-
-/**
- * Wrap a test function in useFakeTimers/useRealTimers.
- */
-export const withFakeTimers =
-  <F extends (...args: any[]) => any>(fn: F) =>
-  (...args: Parameters<F>): ReturnType<F> => {
-    try {
-      jest.useFakeTimers();
-      return fn(...args);
-    } finally {
-      // "It's important to also call runOnlyPendingTimers before switching to real timers.
-      // This will ensure you flush all the pending timers before you switch to real timers."
-      // -- https://testing-library.com/docs/using-fake-timers/
-      jest.runOnlyPendingTimers();
-      jest.useRealTimers();
-    }
-  };

packages/components/src/TooltipTrigger.test.ts

@@ -1,10 +1,10 @@
 // ESLint thinks @terra-ui-packages/test-utils should be listed in dependencies instead of devDependencies.
 // TODO: Fix this in ESLint configuration.
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { baseConfig } from '@terra-ui-packages/test-utils';
+import { getJestConfig } from '@terra-ui-packages/test-utils';
 
 export default {
-  ...baseConfig,
+  ...getJestConfig(),
   // Ignore type tests when calculating coverage.
   coveragePathIgnorePatterns: ['\\.types\\.ts$', '\\.errors\\.ts$'],
 };

packages/components/src/internal/test-utils.ts

@@ -1,10 +1,3 @@
 # test-utils
 
-Shared configuration for testing packages with Jest.
-
-Note that, unlike most packages, this package does not have a build process.
-Because the source files are directly exported, ES Modules are named with a
-`.mjs` extension to enforce fully specified imports within this package.
-
-The files in src/transforms were originally generated by Create React App.
-Since they are CommonJS, they are named with a `.cjs` extension.
+Shared configuration and helpers for testing packages with Jest.

packages/core-utils/jest.config.mjs

@@ -1,16 +1,28 @@
 {
   "name": "@terra-ui-packages/test-utils",
-  "version": "0.0.2",
+  "version": "0.0.3",
+  "scripts": {
+    "build": "vite build --emptyOutDir",
+    "dev": "vite build --mode=development --watch",
+    "test": "yarn run build >/dev/null && jest"
+  },
   "type": "module",
-  "module": "./src/index.mjs",
+  "module": "./lib/es/index.js",
+  "main": "./lib/cjs/index.cjs",
+  "types": "./lib/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./src/index.mjs"
+      "import": "./lib/es/index.js",
+      "require": "./lib/cjs/index.cjs",
+      "types": "./lib/types/index.d.ts"
     }
   },
-  "scripts": {
-    "build": "true"
-  },
+  "files": [
+    "lib/cjs/**",
+    "lib/es/**",
+    "lib/types/**",
+    "transforms/**"
+  ],
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@testing-library/jest-dom": "^5.17.0",
@@ -25,5 +37,13 @@
     "jest-fail-on-console": "^3.1.1",
     "jest-watch-typeahead": "^1.0.0",
     "whatwg-fetch": "^3.6.2"
+  },
+  "devDependencies": {
+    "@jest/types": "^27.5.1",
+    "@terra-ui-packages/build-utils": "^1.0.0",
+    "@types/jest": "^28.1.8",
+    "@types/node": "^20.6.2",
+    "typescript": "^4.9.5",
+    "vite": "^4.3.9"
   }
 }

packages/test-utils/README.md

@@ -0,0 +1,2 @@
+export * from './jestConfig';
+export * from './withFakeTimers';

packages/test-utils/package.json

@@ -0,0 +1,55 @@
+import type { Config } from '@jest/types';
+import fs from 'fs';
+import { createRequire } from 'module';
+import path from 'path';
+import process from 'process';
+import { fileURLToPath } from 'url';
+
+export const getJestConfig = (): Config.InitialOptions => {
+  // Use consistent time zone when testing locally and in CI.
+  process.env.TZ = 'UTC';
+
+  const require = createRequire(import.meta.url);
+  const testUtilsPath = path.dirname(fileURLToPath(import.meta.url));
+
+  // setupTests has a different file extension depending on whether it's built
+  // as an ES module (the default, .js) or as a CommonJS module (.cjs).
+  // This returns the path to the setupTests file that is a sibling of this
+  // file (jest.config) in the build output.
+  const getSetupTestsPath = (): string => {
+    const extensions = ['js', 'cjs'];
+    for (const ext of extensions) {
+      const setupTestsPath = path.resolve(testUtilsPath, `setupTests.${ext}`);
+      if (fs.existsSync(setupTestsPath)) {
+        return setupTestsPath;
+      }
+    }
+
+    throw new Error('Unable to locate setupTests');
+  };
+
+  const jestConfig: Config.InitialOptions = {
+    rootDir: process.cwd(),
+    roots: ['<rootDir>/src'],
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+    setupFilesAfterEnv: [getSetupTestsPath()],
+    testMatch: ['<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}', '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'],
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': path.resolve(testUtilsPath, '../../transforms/babelTransform.cjs'),
+      '^.+\\.css$': path.resolve(testUtilsPath, '../../transforms/cssTransform.cjs'),
+      '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': path.resolve(testUtilsPath, '../../transforms/fileTransform.cjs'),
+    },
+    transformIgnorePatterns: [],
+    modulePaths: [],
+    moduleNameMapper: {
+      '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+      '^src/(.*)$': '<rootDir>/src/$1',
+    },
+    watchPlugins: [require.resolve('jest-watch-typeahead/filename'), require.resolve('jest-watch-typeahead/testname')],
+    resetMocks: false,
+    clearMocks: true,
+  };
+
+  return jestConfig;
+};

packages/test-utils/src/index.mjs

@@ -1,8 +1,8 @@
-/* eslint-env jest */
 import '@testing-library/jest-dom';
 import 'blob-polyfill';
 import 'whatwg-fetch';
 
+// @ts-expect-error Types for the current version of jest-axe are not available.
 import { toHaveNoViolations } from 'jest-axe';
 import failOnConsole from 'jest-fail-on-console';
 

packages/test-utils/src/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Wrap a test function in useFakeTimers/useRealTimers.
+ */
+export const withFakeTimers =
+  <F extends (...args: any[]) => any>(fn: F) =>
+  (...args: Parameters<F>): ReturnType<F> => {
+    try {
+      jest.useFakeTimers();
+      return fn(...args);
+    } finally {
+      // "It's important to also call runOnlyPendingTimers before switching to real timers.
+      // This will ensure you flush all the pending timers before you switch to real timers."
+      // -- https://testing-library.com/docs/using-fake-timers/
+      jest.runOnlyPendingTimers();
+      jest.useRealTimers();
+    }
+  };

packages/test-utils/src/jest.config.mjs

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib/types",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.types.ts", "src/**/*.errors.ts"]
+}

packages/test-utils/src/jestConfig.ts

@@ -0,0 +1,22 @@
+import { viteConfig as defineBaseConfig } from '@terra-ui-packages/build-utils';
+import { defineConfig } from 'vite';
+
+export default defineConfig((args) => {
+  const baseConfig = defineBaseConfig(args)
+  return {
+    ...baseConfig,
+    build: {
+      ...baseConfig.build,
+      lib: {
+        ...baseConfig.build.lib,
+        entry: [
+          'src/index.ts',
+          // Since jest.config references setupTests but does not import it,
+          // setupTests has to be added as a separate entry point in order
+          // for it to be bundled.
+          'src/setupTests.ts',
+        ]
+      },
+    }
+  }
+});

packages/test-utils/src/setupTests.mjs packages/test-utils/src/setupTests.ts

@@ -3020,7 +3020,11 @@ __metadata:
   resolution: "@terra-ui-packages/test-utils@workspace:packages/test-utils"
   dependencies:
     "@babel/core": ^7.16.0
+    "@jest/types": ^27.5.1
+    "@terra-ui-packages/build-utils": ^1.0.0
     "@testing-library/jest-dom": ^5.17.0
+    "@types/jest": ^28.1.8
+    "@types/node": ^20.6.2
     babel-jest: ^27.4.2
     babel-preset-react-app: ^10.0.1
     blob-polyfill: ^7.0.20220408
@@ -3031,6 +3035,8 @@ __metadata:
     jest-axe: ^6.0.0
     jest-fail-on-console: ^3.1.1
     jest-watch-typeahead: ^1.0.0
+    typescript: ^4.9.5
+    vite: ^4.3.9
     whatwg-fetch: ^3.6.2
   languageName: unknown
   linkType: soft
@@ -3376,6 +3382,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^20.6.2":
+  version: 20.6.2
+  resolution: "@types/node@npm:20.6.2"
+  checksum: 96fe5303872640a173f3fd43e289a451776ed5b8f0090094447c6790b43f23fb607eea8268af0829cef4d132e5afa0bfa4cd871aa7412e9042a414a698e9e971
+  languageName: node
+  linkType: hard
+
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/parse-json@npm:4.0.0"