From 4c154e28e878d5257262e9840c41a0593d5e8166 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sat, 30 Apr 2022 17:01:24 +0200
Subject: [PATCH] test(theme-ui): use act properly

---
 packages/theme-ui/test/color-modes.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/theme-ui/test/color-modes.tsx b/packages/theme-ui/test/color-modes.tsx
index 5bf483d6a..f77ba2c89 100644
--- a/packages/theme-ui/test/color-modes.tsx
+++ b/packages/theme-ui/test/color-modes.tsx
@@ -4,7 +4,7 @@
  */
 
 import renderer from 'react-test-renderer'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent, cleanup, act } from '@theme-ui/test-utils'
 import { matchers } from '@emotion/jest'
 import mockConsole, { RestoreConsole } from 'jest-mock-console'
 import packageInfo from '@emotion/react/package.json'
@@ -159,7 +159,7 @@ test('color mode is passed through theme context', () => {
     </ThemeProvider>
   )
   const button = tree.getByText('test')
-  button.click()
+  act(() => button.click())
   expect(mode).toBe('dark')
   expect(tree.getByText('test')).toHaveStyleRule('color', 'cyan')
 })
@@ -464,7 +464,7 @@ test('dot notation works with color modes', () => {
     </ThemeProvider>
   )
   const button = root.getByText('test')
-  button.click()
+  act(() => button.click())
   expect(button).toHaveStyleRule('color', 'tomato')
 })
 
@@ -504,7 +504,7 @@ test('dot notation works with color modes and custom properties', () => {
     </ThemeProvider>
   )
   const button = root.getByText('test')
-  button.click()
+  act(() => button.click())
   expect(button).toHaveStyleRule('color', 'var(--theme-ui-colors-header-title)')
 })