Fix failing dark mode style test

- not totally sure why this requires an async/await now - maybe because the color is still transitioning between the two? :|
elastic · Sep 16, 2024 · 657586f · 657586f
1 parent 9de0617
commit 657586f
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx
@@ -19,7 +19,7 @@ import {
 
 const darkModeWrapper: FunctionComponent<PropsWithChildren> = ({
   children,
-}) => <EuiProvider colorMode="DARK">{children}</EuiProvider>;
+}) => <EuiProvider colorMode="dark">{children}</EuiProvider>;
 
 describe('euiFormVariables', () => {
   it('outputs an object of reusable form vars', () => {
@@ -59,13 +59,16 @@ describe('euiFormVariables', () => {
     `);
   });
 
-  test('dark mode', () => {
-    const { result } = renderHook(() => euiFormVariables(useEuiTheme()), {
-      wrapper: darkModeWrapper,
+  test('dark mode', async () => {
+    await (() => {
+      const { result } = renderHook(() => euiFormVariables(useEuiTheme()), {
+        wrapper: darkModeWrapper,
+      });
+
+      // Check custom dark-mode logic
+      expect(result.current.backgroundColor).toEqual('#16171c');
+      expect(result.current.controlPlaceholderText).toEqual('#878b95');
     });
-    // Check custom dark-mode logic
-    expect(result.current.backgroundColor).toEqual('#16171c');
-    expect(result.current.controlPlaceholderText).toEqual('#878b95');
   });
 });