test(query-devtools/Explorer): add test for rendering under the 'light' theme (TanStack#10768)

Author: sukvvon

packages/query-devtools/src/__tests__/Explorer.test.tsx

@@ -28,7 +28,11 @@ describe('Explorer', () => {
     queryClient.clear()
   })
 
-  function renderExplorer(props: Parameters<typeof Explorer>[0]) {
+  function renderExplorer(
+    props: Parameters<typeof Explorer>[0],
+    options: { theme?: 'dark' | 'light' } = {},
+  ) {
+    const theme = options.theme ?? 'dark'
     return render(() => (
       <QueryDevtoolsContext.Provider
         value={{
@@ -38,7 +42,7 @@ describe('Explorer', () => {
           onlineManager,
         }}
       >
-        <ThemeContext.Provider value={() => 'dark'}>
+        <ThemeContext.Provider value={() => theme}>
           <Explorer {...props} />
         </ThemeContext.Provider>
       </QueryDevtoolsContext.Provider>
@@ -562,4 +566,26 @@ describe('Explorer', () => {
       expect(queryClient.getQueryData(['data'])).toEqual({})
     })
   })
+
+  describe('theme', () => {
+    it('should render without throwing under the "light" theme', () => {
+      const value = { items: ['a'], flag: true }
+      queryClient.setQueryData(['data'], value)
+
+      expect(() =>
+        renderExplorer(
+          {
+            label: 'Data',
+            value,
+            defaultExpanded: ['Data'],
+            editable: true,
+            activeQuery: queryClient
+              .getQueryCache()
+              .find({ queryKey: ['data'] }) as Query,
+          },
+          { theme: 'light' },
+        ),
+      ).not.toThrow()
+    })
+  })
 })