fix: add an explicit dependency on ts-jest to get tests passing

* feat: enable Typescript in this repo

* refactor: rename studio-header files to .ts[x]

* chore: fix minor type warnings

* chore: add types for frontend-platform

* chore: fix type issues

* chore: update name of suppressed lint check

.github/workflows/ci.yml

@@ -24,6 +24,8 @@ jobs:
       run: make validate-no-uncommitted-package-lock-changes
     - name: Lint
       run: npm run lint
+    - name: Type check
+      run: npm run types
     - name: Test
       run: npm run test
     - name: Build

.github/workflows/release.yml

@@ -25,6 +25,8 @@ jobs:
       run: make validate-no-uncommitted-package-lock-changes
     - name: Lint
       run: npm run lint
+    - name: Type check
+      run: npm run types
     - name: Test
       run: npm run test
     - name: i18n_extract

example/index.js

@@ -1,5 +1,3 @@
-import 'babel-polyfill';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';

package.json

@@ -13,7 +13,8 @@
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage"
+    "test": "fedx-scripts jest --coverage",
+    "types": "tsc --noEmit"
   },
   "files": [
     "/dist"
@@ -39,7 +40,7 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "^16.2.0",
     "jest": "30.0.4",
-    "jest-chain": "1.1.6",
+    "jest-environment-jsdom": "^30.0.0",
     "prop-types": "15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -47,7 +48,8 @@
     "react-router-dom": "6.30.1",
     "react-test-renderer": "^18.3.1",
     "redux": "4.2.1",
-    "redux-saga": "1.3.0"
+    "redux-saga": "1.3.0",
+    "ts-jest": "^29.4.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.7.2",
@@ -56,10 +58,7 @@
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@openedx/frontend-plugin-framework": "^1.7.0",
-    "axios-mock-adapter": "1.22.0",
-    "babel-polyfill": "6.26.0",
     "classnames": "^2.5.1",
-    "jest-environment-jsdom": "^30.0.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"
   },

src/Header.test.jsx

@@ -33,6 +33,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -56,6 +57,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -74,6 +76,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();

src/desktop-header/DesktopHeader.jsx

@@ -22,7 +22,7 @@ import messages from '../Header.messages';
 import { CaretIcon } from '../Icons';
 
 class DesktopHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
+  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
     super(props);
   }
 

src/frontend-platform.d.ts

@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}

src/mobile-header/MobileHeader.jsx

@@ -21,7 +21,7 @@ import messages from '../Header.messages';
 import { MenuIcon } from '../Icons';
 
 class MobileHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
+  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
     super(props);
   }
 

src/setupTest.js

@@ -4,8 +4,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import 'babel-polyfill';
-import 'jest-chain';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { configure as configureLogging } from '@edx/frontend-platform/logging';
 import { configure as configureI18n } from '@edx/frontend-platform/i18n';

src/studio-header/BrandNav.test.tsx

@@ -34,7 +34,7 @@ describe('BrandNav Component', () => {
   it('displays a link that navigates to studioBaseUrl', () => {
     render(<RootWrapper />);
 
-    const link = screen.getByRole('link');
+    const link = screen.getByRole('link') as HTMLAnchorElement;
     expect(link.href).toBe(studioBaseUrl);
   });
 });

src/studio-header/CourseLockUp.test.tsx

@@ -16,7 +16,7 @@ const mockProps = {
 
 const RootWrapper = (props) => (
   <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
       <CourseLockUp {...props} />
     </IntlProvider>
   </MemoryRouter>
@@ -52,7 +52,8 @@ describe('CourseLockUp Component', () => {
   it('navigates to an absolute URL when clicked', () => {
     render(<RootWrapper {...mockProps} />);
 
-    const link = screen.getByTestId('course-lock-up-block');
+    // FIXME: don't use testId - https://testing-library.com/docs/queries/about#priority
+    const link = screen.getByTestId('course-lock-up-block') as HTMLAnchorElement;
     expect(link.href).toBe(mockProps.outlineLink);
   });
 });

src/studio-header/HeaderBody.test.tsx

@@ -35,7 +35,7 @@ const defaultProps = {
 
 const RootWrapper = (props) => (
   <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
       <HeaderBody {...props} />
     </IntlProvider>
   </MemoryRouter>

src/studio-header/HeaderBody.tsx

@@ -135,6 +135,7 @@ const HeaderBody = ({
               logoutUrl,
               authenticatedUserAvatar,
               isAdmin,
+              isMobile,
             }}
           />
         </Nav>

src/studio-header/MobileHeader.tsx

@@ -13,6 +13,7 @@ const MobileHeader = ({
 
   return (
     <>
+      {/* @ts-expect-error The type of 'props' is any until we convert from propTypes to TypeScript interface/types */}
       <HeaderBody
         {...props}
         isMobile

src/studio-header/StudioHeader.test.tsx

@@ -26,7 +26,7 @@ let screenWidth = 1280;
 
 const RootWrapper = ({
   ...props
-}) => {
+}: React.ComponentProps<typeof StudioHeader>) => {
   const appContextValue = useMemo(() => ({
     authenticatedUser: currentUser,
     config: {
@@ -55,7 +55,7 @@ const RootWrapper = ({
   );
 };
 
-const props = {
+const props: React.ComponentProps<typeof StudioHeader> = {
   number: '123',
   org: 'Ed',
   title: 'test',
@@ -74,6 +74,10 @@ const props = {
   outlineLink: 'tEsTLInK',
   searchButtonAction: null,
   isNewHomePage: true,
+  // These default values shouldn't be needed but typescript is confused by propTypes; can remove after converting
+  // from propTypes to TypeScript:
+  containerProps: {},
+  isHiddenMainMenu: false,
 };
 
 describe('Header', () => {

src/studio-header/StudioHeader.tsx

@@ -19,6 +19,7 @@ const StudioHeader = ({
   number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
   outlineLink, searchButtonAction, isNewHomePage,
 }) => {
+  // @ts-expect-error - frontend-platform doesn't yet have type information :/
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
     logo: config.LOGO_URL,

tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "@edx/typescript-config",
+    "compilerOptions": {
+      "noEmit": true,
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["*"]
+      }
+    },
+    "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*"],
+    "exclude": ["dist", "node_modules"]
+}