Configure Jest for TypeScript

.eslintrc

@@ -386,7 +386,9 @@
       "files": [
         "__mocks__/**/*.js",
         "**/test/**/*.js",
+        "**/test/**/*.ts",
         "**/testUtils/**/*.js",
+        "**/testUtils/**/*.ts",
         "tests/js/**/*.js"
       ],
       "excludedFiles": [
@@ -430,6 +432,16 @@
         "testing-library/no-dom-import": "error"
       }
     },
+    {
+      "files": [
+        "**/test/**/*.ts",
+        "**/testUtils/**/*.ts"
+      ],
+      "rules": {
+        "@typescript-eslint/unbound-method": "off",
+        "jest/unbound-method": "error"
+      }
+    },
     {
       "files": [
         "__mocks__/**/*.js"

package.json

@@ -33,10 +33,10 @@
   },
   "devDependencies": {
     "@ampproject/toolbox-optimizer": "^2.9.0",
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.19.6",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/eslint-plugin": "^7.19.1",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@googleforcreators/dashboard": "*",
@@ -46,13 +46,14 @@
     "@googleforcreators/migration": "*",
     "@googleforcreators/moveable": "*",
     "@googleforcreators/story-editor": "*",
+    "@jest/types": "^29.0.1",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
-    "@percy/cli": "^1.10.4",
+    "@percy/cli": "^1.12.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
     "@prettier/plugin-xml": "^2.2.0",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-dynamic-import-vars": "^1.4.4",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-dynamic-import-vars": "^2.0.1",
     "@rollup/plugin-json": "^5.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^9.0.2",
@@ -78,10 +79,16 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
+    "@types/eslint": "^8.4.6",
+    "@types/eslint-scope": "^3.7.4",
+    "@types/estree": "^1.0.0",
+    "@types/jest": "^29.0.0",
+    "@types/jsdom": "^20.0.0",
+    "@types/node": "^18.11.6",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
     "@web-stories-wp/e2e-tests": "*",
     "@web-stories-wp/eslint-import-resolver": "*",
     "@web-stories-wp/jest-amp": "*",
@@ -103,18 +110,18 @@
     "core-js": "^3.26.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.2.1",
+    "css-minimizer-webpack-plugin": "^4.2.2",
     "cssnano": "^5.1.13",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-header": "^3.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jasmine": "^4.1.3",
-    "eslint-plugin-jest": "^27.1.2",
+    "eslint-plugin-jest": "^27.1.3",
     "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-jest-extended": "^2.0.0",
-    "eslint-plugin-jsdoc": "^39.3.13",
+    "eslint-plugin-jsdoc": "^39.3.25",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-node": "^11.1.0",
@@ -123,14 +130,14 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^1.5.0",
     "eslint-plugin-styled-components-a11y": "^1.0.0",
-    "eslint-plugin-testing-library": "^5.7.2",
+    "eslint-plugin-testing-library": "^5.9.1",
     "glob": "^8.0.3",
     "html-webpack-plugin": "^5.3.2",
     "husky": "^8.0.1",
     "jest": "^29.2.2",
     "jest-axe": "^6.0.0",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.2.0",
+    "jest-environment-jsdom": "^29.2.2",
     "jest-extended": "^3.1.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-matcher-deep-close-to": "^3.0.2",
@@ -149,7 +156,7 @@
     "mockdate": "^3.0.5",
     "npm-package-json-lint": "^6.3.0",
     "npm-run-all": "^4.1.5",
-    "patch-package": "^6.4.7",
+    "patch-package": "^6.5.0",
     "postcss-jsx": "^0.36.4",
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.7.1",
@@ -177,7 +184,7 @@
     "terser-webpack-plugin": "^5.3.6",
     "typescript": "^4.8.4",
     "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.6.1",
+    "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
     "webpackbar": "^5.0.2",

packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js

@@ -17,7 +17,7 @@
 /**
  * External dependencies
  */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from '@googleforcreators/react';
 import { Pill } from '@googleforcreators/design-system';
 import { __, sprintf } from '@googleforcreators/i18n';
 import styled from 'styled-components';

packages/date/src/formatTime.ts

@@ -26,7 +26,7 @@ import { getSettings } from './settings';
  * @param date Date to format.
  * @return Displayable relative date string
  */
-function formatTime(date: Date) {
+function formatTime(date: Date | string) {
   const settings = getSettings();
   const { timeFormat } = settings;
   return format(date, timeFormat);

packages/date/src/settings.ts

@@ -56,7 +56,7 @@ export function resetSettings() {
  *
  * @param newSettings Date settings.
  */
-export function updateSettings(newSettings: Settings) {
+export function updateSettings(newSettings: Partial<Settings>) {
   settings = {
     ...settings,
     ...newSettings,

packages/date/src/test/convertFormatString.js → packages/date/src/test/convertFormatString.ts

@@ -32,7 +32,8 @@ describe('date/convertFormatString', () => {
     'converts PHP date format string to its date-fns equivalent',
     (formatString, expectedOutput) => {
       const convertedWithoutSeparator = convertFormatString(
-        formatString
+        formatString,
+        new Date()
       ).replace(FORMAT_TOKEN_SEPARATOR_REGEX, '');
       expect(convertedWithoutSeparator).toStrictEqual(expectedOutput);
       expect(() => format(new Date(), formatString)).not.toThrow();

packages/date/src/test/getRelativeDisplayDate.js → packages/date/src/test/getRelativeDisplayDate.ts

@@ -31,7 +31,7 @@ import getOptions from '../getOptions';
 /**
  * Returns the current date in the site's timezone.
  *
- * @return {Date} Date object.
+ * @return Date object.
  */
 function getCurrentDate() {
   return toDate(new Date(), getOptions());
@@ -204,10 +204,4 @@ describe('date/getRelativeDisplayDate', () => {
 
     expect(formattedDate).toBe('05/02/2020');
   });
-
-  it('should return an empty string with a null date', () => {
-    const formattedDate = getRelativeDisplayDate(null);
-
-    expect(formattedDate).toBe('');
-  });
 });

packages/date/src/test/getTimeZoneString.js → packages/date/src/test/getTimeZoneString.ts

@@ -68,9 +68,4 @@ describe('date/getTimeZoneString', () => {
     updateSettings({ gmtOffset: -121.1 });
     expect(getTimeZoneString()).toBe('-02:01');
   });
-
-  it('returns default is offset if NaN', () => {
-    updateSettings({ gmtOffset: 'EST' });
-    expect(getTimeZoneString()).toBe('+00');
-  });
 });

packages/design-system/src/components/dialog/index.js

@@ -62,11 +62,26 @@ const DialogActions = styled.div`
     }
   }
 `;
+
+/**
+ * @typedef {Object} DialogProps
+ * @property {import('react').ReactNode} children Children.
+ * @property {string} title Title.
+ * @property {import('react').ReactNode[]} actions Actions.
+ * @property {boolean} isOpen Whether the dialog is open.
+ * @property {Function} onClose Close callback.
+ * @property {string} contentLabel Content label.
+ */
+
 /**
+ * Dialog component.
+ *
  * Dialogs should be wrapped in a ThemeProvider
  * and given the inverted theme to the app.
+ *
+ * @param {DialogProps} Dialog props.
+ * @return {import('react').ReactElement} Dialog.
  */
-
 export function Dialog({
   children,
   title,

packages/design-system/src/components/keyboard/gridview/useGridViewKeys.js

@@ -45,9 +45,8 @@ import {
 /**
  * Allows keyboard arrow navigation through grids
  *
- * @param  {UseGridViewKeysProps} props
+ * @param  {UseGridViewKeysProps} props Grid view keys props.
  */
-
 function useGridViewKeys(props) {
   const {
     currentItemId,

packages/design-system/src/components/tooltip/index.js

@@ -102,7 +102,6 @@ let lastVisibleDelayedTooltip = null;
  * @param {number} props.popupZIndexOverride If present, passes an override for z-index to popup
  * @return {import('react').Component} BaseTooltip element
  */
-
 function BaseTooltip({
   title,
   shortcut,

packages/elements/tsconfig.json

@@ -10,6 +10,5 @@
     { "path": "../patterns" },
     { "path": "../units" }
   ],
-  "include": ["src/**/*"],
-  "exclude": ["src/**/test/**/*"]
+  "include": ["src/**/*"]
 }

packages/fonts/src/test/curatedFonts.js → packages/fonts/src/test/curatedFonts.ts

@@ -24,14 +24,15 @@ import { resolve } from 'path';
  * Internal dependencies
  */
 import { CURATED_FONT_NAMES } from '../constants';
+import type { Font } from '../types';
 
 describe('Curated fonts', () => {
-  const fonts = JSON.parse(
+  const fonts: Font[] = JSON.parse(
     readFileSync(
       resolve(process.cwd(), 'packages/fonts/src/fonts.json'),
       'utf8'
     )
-  );
+  ) as Font[];
   const fontNames = fonts.map(({ family }) => family);
 
   // @see https://github.com/googleforcreators/web-stories-wp/issues/3880

packages/i18n/src/test/transformNode.js → packages/i18n/src/test/transformNode.tsx

@@ -18,6 +18,7 @@
  * External dependencies
  */
 import { renderToStaticMarkup } from '@googleforcreators/react';
+import type { ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -57,7 +58,11 @@ describe('transformNode', () => {
     node.setAttribute('class', 'bar');
     node.textContent = 'Hello World';
 
-    const AwesomeComponent = ({ children }) => {
+    const AwesomeComponent = ({
+      children,
+    }: {
+      children?: ReactNode | undefined;
+    }) => {
       return (
         <div id="bar" className="baz">
           {children}
@@ -81,7 +86,11 @@ describe('transformNode', () => {
     p.appendChild(span);
     node.appendChild(p);
 
-    const AwesomeComponent = ({ children }) => {
+    const AwesomeComponent = ({
+      children,
+    }: {
+      children?: ReactNode | undefined;
+    }) => {
       return (
         <span id="bar" className="baz">
           <em>{children}</em>

packages/i18n/src/test/translateToExclusiveList.js → packages/i18n/src/test/translateToExclusiveList.ts

@@ -20,13 +20,15 @@
 import translateToExclusiveList from '../translateToExclusiveList';
 
 describe('translateToExclusiveList', () => {
-  it.each`
-    options                                        | result
-    ${[]}                                          | ${''}
-    ${['one']}                                     | ${'one'}
-    ${['doctor', 'barnacle']}                      | ${'doctor or barnacle'}
-    ${['apple', 'banana', 'mango', 'dragonfruit']} | ${'apple, banana, mango, or dragonfruit'}
-  `('should translate as expected', ({ options, result }) => {
+  it.each([
+    [[], ''],
+    [['one'], 'one'],
+    [['doctor', 'barnacle'], 'doctor or barnacle'],
+    [
+      ['apple', 'banana', 'mango', 'dragonfruit'],
+      'apple, banana, mango, or dragonfruit',
+    ],
+  ])('should translate as expected', (options, result) => {
     expect(translateToExclusiveList(options)).toBe(result);
   });
 });

packages/i18n/src/test/translateToInclusiveList.js → packages/i18n/src/test/translateToInclusiveList.ts

@@ -13,19 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * Internal dependencies
  */
 import translateToInclusiveList from '../translateToInclusiveList';
 
 describe('translateToInclusiveList', () => {
-  it.each`
-    options                                        | result
-    ${[]}                                          | ${''}
-    ${['one']}                                     | ${'one'}
-    ${['doctor', 'barnacle']}                      | ${'doctor and barnacle'}
-    ${['apple', 'banana', 'mango', 'dragonfruit']} | ${'apple, banana, mango, and dragonfruit'}
-  `('should translate as expected', ({ options, result }) => {
+  it.each([
+    [[], ''],
+    [['one'], 'one'],
+    [['doctor', 'barnacle'], 'doctor and barnacle'],
+    [
+      ['apple', 'banana', 'mango', 'dragonfruit'],
+      'apple, banana, mango, and dragonfruit',
+    ],
+  ])('should translate as expected', (options, result) => {
     expect(translateToInclusiveList(options)).toBe(result);
   });
 });

packages/i18n/src/test/translateWithMarkup.js → packages/i18n/src/test/translateWithMarkup.tsx

@@ -18,6 +18,7 @@
  * External dependencies
  */
 import { renderToStaticMarkup } from '@googleforcreators/react';
+import type { ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -72,7 +73,10 @@ describe('TranslateWithMarkup component', () => {
   it('returns expected React element for custom component', () => {
     const string = 'This is a <a>link</a>!';
 
-    const Link = (props) => {
+    const Link = (props: {
+      href: string;
+      children?: ReactNode | undefined;
+    }) => {
       return <a {...props}>{props.children}</a>;
     };
 
@@ -86,7 +90,12 @@ describe('TranslateWithMarkup component', () => {
   });
 
   it('returns expected React element for multiple components', () => {
-    const Link = (props) => {
+    const Link = (props: {
+      href: string;
+      target: string;
+      rel: string;
+      children?: ReactNode | undefined;
+    }) => {
       return <a {...props}>{props.children}</a>;
     };