!165 fix(core): 修复css变量为undefined是仍然被渲染的错误

* chore: bump jest to 29.7.0
* fix(core): 修复css变量为undefined是仍然被渲染的错误

package.json

@@ -67,8 +67,8 @@
     "eslint-plugin-no-function-declare-after-return": "^1.0.0",
     "eslint-plugin-react": "7.14.3",
     "husky": "^8.0.3",
-    "jest": "^25.5.4",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.0",
     "openinula": "workspace:*",
     "prettier": "^3.1.1",

packages/inula/__tests__/ComponentTest/PortalComponent.test.js

@@ -282,7 +282,7 @@ describe('PortalComponent Test', () => {
 
     Inula.render(<App />, container);
     showPortalInput(true);
-    jest.advanceTimersToNextTimer();
+    jest.useFakeTimers();
     dispatchChangeEvent(inputRef.current, 'test');
     expect(fn).toHaveBeenCalledTimes(1);
   });

packages/inula/jest.config.js

@@ -23,7 +23,7 @@ module.exports = {
 
   setupFilesAfterEnv: [require.resolve('./__tests__/jest/jestSetting.js')],
 
-  testEnvironment: 'jest-environment-jsdom-sixteen',
+  testEnvironment: 'jest-environment-jsdom',
 
   testMatch: [
     // '<rootDir>/scripts/__tests__/InulaXTest/edgeCases/deepVariableObserver.test.tsx',
@@ -32,5 +32,5 @@ module.exports = {
     '<rootDir>/__tests__/**/*.test.tsx',
   ],
 
-  timers: 'fake',
+  fakeTimers: { enableGlobally: true },
 };

packages/inula/src/dom/DOMPropertiesHandler/StyleHandler.ts

@@ -62,16 +62,16 @@ function isNeedUnitCSS(styleName: string) {
  * 对空值或布尔值进行适配，转为空字符串
  * 去掉多余空字符
  */
-export function adjustStyleValue(name, value) {
-  let validValue = value;
-
-  if (typeof value === 'number' && value !== 0 && isNeedUnitCSS(name)) {
-    validValue = `${value}px`;
-  } else if (value === '' || value === null || value === undefined || typeof value === 'boolean') {
-    validValue = '';
+export function adjustStyleValue(name: string, value: unknown, isCustomProperty = false) {
+  if (value === '' || value === null || value === undefined || typeof value === 'boolean') {
+    return '';
   }
 
-  return validValue;
+  if (!isCustomProperty && typeof value === 'number' && value !== 0 && isNeedUnitCSS(name)) {
+    return `${value}px`;
+  }
+
+  return value;
 }
 
 /**
@@ -83,14 +83,16 @@ export function setStyles(dom, styles) {
   }
 
   const style = dom.style;
-  Object.keys(styles).forEach(name => {
-    const styleVal = styles[name];
-    // 以--开始的样式直接设置即可
-    if (name.indexOf('--') === 0) {
+  for (let name of Object.keys(styles)) {
+    const isCustomProperty = name.indexOf('--') == 0;
+    const styleVal = adjustStyleValue(name, styles[name], isCustomProperty);
+    if (name === 'float') {
+      name = 'cssFloat';
+    }
+    if (isCustomProperty) {
       style.setProperty(name, styleVal);
     } else {
-      // 使用这种赋值方式，浏览器可以将'WebkitLineClamp'， 'backgroundColor'分别识别为'-webkit-line-clamp'和'backgroud-color'
-      style[name] = adjustStyleValue(name, styleVal);
+      style[name] = styleVal;
     }
-  });
+  }
 }