Merge pull request #3495 from plotly/feature/dcc-refactor-datepicker

dcc redesign: `DatePickerSingle` and `DatePickerRange`

Author: KoolADE85

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 - Modernized `dcc.Tabs`
+- Modernized `dcc.DatePickerSingle` and `dcc.DatePickerRange`
 
 ## Changed
 - `dcc.Tab` now accepts a `width` prop which can be a pixel or percentage width for an individual tab.
@@ -50,7 +51,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3347](https://github.com/plotly/dash/pull/3347) Added 'api_endpoint' to `callback` to expose api endpoints at the provided path for use to be executed directly without dash.
 - [#3445](https://github.com/plotly/dash/pull/3445) Added API to reverse direction of slider component.
 - [#3460](https://github.com/plotly/dash/pull/3460) Add `/health` endpoint for server monitoring and health checks.
-- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies. 
+- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies.
 
 ## Fixed
 - [#3490](https://github.com/plotly/dash/pull/3490) Fix stack overflow when circular callbacks are displayed on the devtool callback 

components/dash-core-components/jest.config.js

@@ -1,14 +1,37 @@
 module.exports = {
     preset: 'ts-jest',
-    testEnvironment: 'node',
+    testEnvironment: 'jsdom',
     roots: ['<rootDir>/tests'],
-    testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],
+    testMatch: ['**/__tests__/**/*.{ts,tsx}', '**/?(*.)+(spec|test).{ts,tsx}'],
     transform: {
-        '^.+\\.ts$': 'ts-jest',
+        '^.+\\.(ts|tsx)$': [
+            'ts-jest',
+            {
+                tsconfig: {
+                    jsx: 'react',
+                    esModuleInterop: true,
+                    allowSyntheticDefaultImports: true,
+                    types: ['jest', '@testing-library/jest-dom'],
+                },
+            },
+        ],
+        '^.+\\.js$': [
+            'ts-jest',
+            {
+                tsconfig: {
+                    allowJs: true,
+                },
+            },
+        ],
     },
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
     moduleNameMapper: {
         '^@/(.*)$': '<rootDir>/src/$1',
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     },
     setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    // Disable caching to ensure TypeScript type changes are always picked up
+    cache: false,
+    // Limit workers in CI to prevent out-of-memory errors
+    maxWorkers: process.env.CI ? 2 : undefined,
 };

components/dash-core-components/jest.setup.js

@@ -1,2 +1,11 @@
 // Jest setup file
-// This file is loaded before every test file
+// This file is loaded before every test file
+import '@testing-library/jest-dom';
+
+// Mock window.dash_component_api for components that use Dash context
+global.window = global.window || {};
+global.window.dash_component_api = {
+    useDashContext: () => ({
+        useLoading: () => false,
+    }),
+};