chore: enable jest to test ts and tsx files (#4785)

Co-authored-by: Victor Fernandez de Alba <sneridagh@gmail.com>

.eslintrc

@@ -38,7 +38,7 @@
           ["@package", "./src"],
           ["@root", "./src"]
         ],
-        "extensions": [".js", ".jsx", ".json"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"]
       },
       "babel-plugin-root-import": {
         "rootPathSuffix": "src"

news/4662.feature

@@ -1 +1 @@
-TypeScript support in core @sneridagh
+TypeScript support in core @sneridagh @ninanoleto

package.json

@@ -75,6 +75,7 @@
     ],
     "transform": {
       "^.+\\.js(x)?$": "babel-jest",
+      "^.+\\.ts(x)?$": "ts-jest",
       "^.+\\.(png)$": "jest-file",
       "^.+\\.(jpg)$": "jest-file",
       "^.+\\.(svg)$": "./jest-svgsystem-transform.js"
@@ -111,10 +112,10 @@
       "__DEV__": true
     },
     "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}",
-      "<rootDir>/__tests__/**/?(*.)(spec|test).{js,jsx,mjs}",
-      "<rootDir>/packages/volto-slate/src/**/?(*.)(spec|test).{js,jsx,mjs}"
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs,ts,tsx}",
+      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs,ts,tsx}",
+      "<rootDir>/__tests__/**/?(*.)(spec|test).{js,jsx,mjs,ts,tsx}",
+      "<rootDir>/packages/volto-slate/src/**/?(*.)(spec|test).{js,jsx,mjs,ts,tsx}"
     ]
   },
   "prettier": {
@@ -423,6 +424,8 @@
     "react-is": "^16.13.1",
     "release-it": "^15.1.3",
     "tmp": "0.2.1",
+    "ts-jest": "^26.4.2",
+    "ts-loader": "9.4.2",
     "typescript": "5.0.3",
     "use-trace-update": "1.3.2",
     "why": "0.6.2"

src/components/manage/Blocks/Listing/getAsyncData.js

@@ -25,5 +25,3 @@ export default function getListingBlockAsyncData({
     ),
   ];
 }
-
-export default getListingBlockAsyncData;

src/components/manage/Blocks/Search/components/index.js

@@ -1,13 +1,13 @@
-export SearchDetails from './SearchDetails';
-export Facets from './Facets';
-export SelectFacet from './SelectFacet';
-export CheckboxFacet from './CheckboxFacet';
-export DateRangeFacet from './DateRangeFacet';
-export SearchInput from './SearchInput';
-export FilterList from './FilterList';
-export SortOn from './SortOn';
-export ToggleFacet from './ToggleFacet';
-export SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
-export ToggleFacetFilterListEntry from './ToggleFacetFilterListEntry';
-export DateRangeFacetFilterListEntry from './DateRangeFacetFilterListEntry';
-export ViewSwitcher from './ViewSwitcher';
+export { default as SearchDetails } from './SearchDetails';
+export { default as Facets } from './Facets';
+export { default as SelectFacet } from './SelectFacet';
+export { default as CheckboxFacet } from './CheckboxFacet';
+export { default as DateRangeFacet } from './DateRangeFacet';
+export { default as SearchInput } from './SearchInput';
+export { default as FilterList } from './FilterList';
+export { default as SortOn } from './SortOn';
+export { default as ToggleFacet } from './ToggleFacet';
+export { default as SelectFacetFilterListEntry } from './SelectFacetFilterListEntry';
+export { default as ToggleFacetFilterListEntry } from './ToggleFacetFilterListEntry';
+export { default as DateRangeFacetFilterListEntry } from './DateRangeFacetFilterListEntry';
+export { default as ViewSwitcher } from './ViewSwitcher';

src/components/manage/Blocks/Search/hocs/index.js

@@ -1,2 +1,2 @@
-export withQueryString from './withQueryString';
-export withSearch from './withSearch';
+export { default as withQueryString } from './withQueryString';
+export { default as withSearch } from './withSearch';

src/components/theme/TsTest/TsTest.test.tsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+import TsTest from './TsTest';
+
+describe('Ts test component', () => {
+  test('Renders', () => {
+    const component = renderer.create(<TsTest text="Test a TS component" />);
+    const json = component.toJSON();
+
+    expect(json).toMatchSnapshot();
+  });
+});

src/components/theme/TsTest/TsTest.tsx

@@ -0,0 +1,15 @@
+/**
+ * TEST COMPONENT: React TSX component
+ * Ensure successful implementation of TSX and validate the functionality with Jest tests
+ * Dependencies: jest (version 26.6.3), ts-jest (version ^26.4.2)
+ */
+
+type TestProps = {
+  text: string;
+};
+
+const TsTest = ({ text }: TestProps) => {
+  return <div>{text}</div>;
+};
+
+export default TsTest;

src/components/theme/TsTest/__snapshots__/TsTest.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ts test component Renders 1`] = `
+<div>
+  Test a TS component
+</div>
+`;

src/helpers/Extensions/index.js

@@ -1,5 +1,6 @@
 export * from './withBlockSchemaEnhancer';
-export withBlockExtensions, {
+export {
+  default as withBlockExtensions,
   resolveExtension,
   resolveBlockExtensions,
 } from './withBlockExtensions';

src/helpers/index.js

@@ -5,9 +5,9 @@
  */
 
 // export { injectLazyLibs } from './Loadable/Loadable';
-export Api from '@plone/volto/helpers/Api/Api';
+export { default as Api } from '@plone/volto/helpers/Api/Api';
 export { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
-export Html from '@plone/volto/helpers/Html/Html';
+export { default as Html } from '@plone/volto/helpers/Html/Html';
 export {
   getAuthToken,
   persistAuthToken,
@@ -58,8 +58,8 @@ export {
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
 } from '@plone/volto/helpers/Blocks/Blocks';
-export BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
-export ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
+export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
+export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 export {
   getBoolean,
   getVocabName,
@@ -69,9 +69,9 @@ export {
   getFieldsVocabulary,
 } from '@plone/volto/helpers/Vocabularies/Vocabularies';
 
-export langmap from './LanguageMap/LanguageMap';
-export Helmet from './Helmet/Helmet';
-export FormValidation from './FormValidation/FormValidation';
+export { default as langmap } from './LanguageMap/LanguageMap';
+export { default as Helmet } from './Helmet/Helmet';
+export { default as FormValidation } from './FormValidation/FormValidation';
 export {
   difference,
   getColor,
@@ -109,7 +109,7 @@ export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { useEvent } from './Utils/useEvent';
 export { usePrevious } from './Utils/usePrevious';
 export { usePagination } from './Utils/usePagination';
-export useUndoManager from './UndoManager/useUndoManager';
+export { default as useUndoManager } from './UndoManager/useUndoManager';
 export { getCookieOptions } from './Cookies/cookies';
 export { getWidgetView } from './Widget/widget';
 export {

src/middleware/index.js

@@ -4,8 +4,8 @@
  * @example import { api } from 'middleware';
  */
 
-export api from '@plone/volto/middleware/api';
-export blacklistRoutes from './blacklistRoutes';
+export { default as api } from '@plone/volto/middleware/api';
+export { default as blacklistRoutes } from './blacklistRoutes';
 export {
   protectLoadStart,
   protectLoadEnd,