Spfx 1.20 and React Testing Library implement (#1459)

* Spfx 1.20 and React Testing Library implement

* Disable debug mode

Disable debug mode for production usage

* fixup

---------

Co-authored-by: Adam Wójcik <[email protected]>

samples/react-mega-menu/.gitignore

@@ -31,3 +31,6 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+
+# Heft Folder
+.heft

samples/react-mega-menu/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-mega-menu/.yo-rc.json

@@ -1,12 +1,16 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.12.1",
+    "version": "1.20.0",
     "libraryName": "react-mega-menu",
     "libraryId": "466eb049-ab57-4a5d-ae51-0a8221cdb984",
     "environment": "spo",
+    "nodeVersion": "18.18.0",
     "isCreatingSolution": true,
     "packageManager": "npm",
     "componentType": "webpart",
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "sdkVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2"
+    }
   }
 }

samples/react-mega-menu/README.md

@@ -82,6 +82,7 @@ Since SharePoint list is used to store the menu items is relatively easy to chan
 Solution|Author(s)
 --------|---------
 react-mega-menu | Velin Georgiev ([@VelinGeorgiev](https://twitter.com/velingeorgiev))
+SPFx v1.20 and React Testling Library | Ervin Gayle(https://github.com/ervingayle)
 
 ## Version history
 
@@ -92,6 +93,7 @@ Version|Date|Comments
 0.1.1|October 10, 2018  | Updated to SPFx 1.6.0 and @pnp 1.2.2
 0.1.2|December 10, 2018  | Updated to SPFx 1.7.0 and @pnp 1.2.7
 0.1.3|October 28, 2022  | Upgrade to SPFx 1.12.1
+0.1.4|Decemberr 30, 2024  | Upgrade to SPFx 1.20.0 and React Testing Library from Enzyme
 
 
 ## Disclaimer
@@ -114,6 +116,7 @@ Full URL to request would be something like following:
 https://tenant.sharepoint.com/Shared%20Documents/Forms/AllItems.aspx?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={%226a4a81ba-4704-463b-98eb-1d1bfa710744%22:{%22location%22:%22ClientSideExtension.ApplicationCustomizer%22,%22properties%22:{%22isDebug%22:true,%22rootWebOnly%22:false,%22enableSessionStorageCache%22:true}}}
 ```
 - Select `Load debug scripts` on the **Allow debug scripts?** popup window.
+- To run unit tests `npx jest` or `npx jest --verbose`
 
 ## Features
 

samples/react-mega-menu/__mocks__/sp-core-library/Log.js

@@ -0,0 +1,3 @@
+import jest from 'jest-mock';
+
+export const Log = { info: jest.fn(), error: jest.fn(), warn: jest.fn(), };

samples/react-mega-menu/assets/sample.json

@@ -9,7 +9,7 @@
       "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
     ],
     "creationDateTime": "2018-12-10",
-    "updateDateTime": "2018-12-10",
+    "updateDateTime": "2024-10-31",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.0"
+        "value": "1.20.0"
       }
     ],
 "tags": [],

samples/react-mega-menu/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', { targets: { node: 'current' } }],
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      ['@babel/preset-typescript', { allowNamespaces: true }]
+    ]
+  };

samples/react-mega-menu/config/package-solution.json

@@ -3,15 +3,15 @@
   "solution": {
     "name": "react-mega-menu-client-side-solution",
     "id": "466eb049-ab57-4a5d-ae51-0a8221cdb984",
-    "version": "0.1.3",
+    "version": "0.1.4.0",
     "includeClientSideAssets": true,
     "isDomainIsolated": false,
     "features": [
       {
         "title": "Application Extension - Deployment of custom action.",
         "description": "Deploys a custom action with ClientSideComponentId association",
         "id": "0582bd9b-5570-4698-8ac8-a2aee2801bad",
-        "version": "0.1.0",
+        "version": "0.1.4.0",
         "assets": {
           "elementManifests": [
             "elements.xml"
@@ -21,7 +21,25 @@
           ]
         }
       }
-    ]
+    ],
+    "developer": {
+      "name": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": "",
+      "mpnId": "Undefined-1.15.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "react-mega-menu description"
+      },
+      "longDescription": {
+        "default": "react-mega-menu description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    }
   },
   "paths": {
     "zippedPackage": "solution/react-mega-menu.sppkg"

samples/react-mega-menu/config/sass.json

@@ -0,0 +1,3 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-mega-menu/config/serve.json

@@ -1,7 +1,8 @@
 {
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
   "https": true,
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx",
   "serveConfigurations": {
     "default": {
       "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",

samples/react-mega-menu/jest.config.json

@@ -0,0 +1,19 @@
+{
+    "verbose": true,
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+      "^.+\\.(css|scss|html)$": "jest-transform-stub", 
+      "^(?!.*\\.(js|jsx|ts|tsx|css|json|html)$)": "jest-transform-stub"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!office-ui-fabric-react|@microsoft/sp-core-library|@pnp/sp)"
+    ],
+    "moduleNameMapper": {
+      "^@microsoft/sp-core-library/lib-common/log/(.*)$": "<rootDir>/__mocks__/sp-core-library/$1.js",
+      "\\.(css|scss)$": "identity-obj-proxy"
+    },
+    "setupFilesAfterEnv": ["<rootDir>/setupTests.js"],
+    "testEnvironment": "jsdom",
+    "testMatch": ["<rootDir>/lib/**/*.test.(js|jsx|ts|tsx)"],
+    "preset": "ts-jest"
+}