✅ test: 添加嵌套ThemeProvider 的测试用例

ant-design · Jan 15, 2023 · 7066c3d · 7066c3d
1 parent f494e0e
commit 7066c3d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/containers/ThemeProvider/ThemeSwitcher.tsx b/src/containers/ThemeProvider/ThemeSwitcher.tsx
@@ -55,6 +55,7 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
       else setAppearance(themeMode);
     }, [themeMode]);
 
+    // 自动监听系统主题变更
     useLayoutEffect(() => {
       if (!darkThemeMatch) {
         darkThemeMatch = matchThemeMode('dark');

diff --git a/tests/hooks/useTheme.test.ts → tests/hooks/useTheme.test.tsx b/tests/hooks/useTheme.test.ts → tests/hooks/useTheme.test.tsx
@@ -1,6 +1,7 @@
 import { renderHook } from '@testing-library/react';
 
 import { ThemeProvider, useTheme } from 'antd-style';
+import { FC, PropsWithChildren } from 'react';
 
 describe('useTheme', () => {
   it('如果没有 Provider，theme 对象时是 antd Token 默认值', () => {
@@ -15,6 +16,18 @@ describe('useTheme', () => {
     expect(result.current.stylish).toEqual({});
   });
 
+  it('嵌套 Provider 后能拿到准确的值', () => {
+    const Wrapper: FC<PropsWithChildren> = ({ children }) => {
+      return (
+        <ThemeProvider themeMode={'dark'}>
+          <ThemeProvider prefixCls={'kitchen'}>{children}</ThemeProvider>
+        </ThemeProvider>
+      );
+    };
+    const { result } = renderHook(useTheme, { wrapper: Wrapper });
+    expect(result.current.colorPrimary.toLowerCase()).toEqual('#1668dc');
+  });
+
   it('自定义 Token', () => {});
   it('自定义 Stylish', () => {});
 });
diff --git a/tests/hooks/useToken.test.ts b/tests/hooks/useToken.test.ts
@@ -7,6 +7,4 @@ describe('useAntdToken', () => {
     const { result } = renderHook(useAntdToken);
     expect(result.current.colorPrimary.toLowerCase()).toEqual('#1677ff');
   });
-
-  it('TODO: 嵌套 CP 时能拿到准确的 token 值', () => {});
 });