@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/providers/__tests__/OrganisationProvider.test.tsx

@@ -116,15 +116,15 @@ const TestComponent = () => {
   const org = useOrganisations();
   
   return (
-    <div data-testid="test-component">
-      <div data-testid="organisations-count">{org.organisations.length}</div>
-      <div data-testid="isLoading">{org.isLoading ? 'true' : 'false'}</div>
-      <div data-testid="error">{org.error?.message || 'no-error'}</div>
-      <div data-testid="selectedOrg">{org.selectedOrganisation?.name || org.selectedOrganisation?.display_name || 'no-org'}</div>
-      <div data-testid="hasValidContext">{org.hasValidOrganisationContext ? 'true' : 'false'}</div>
-      <div data-testid="hasSetSelectedOrg">{typeof org.setSelectedOrganisation === 'function' ? 'true' : 'false'}</div>
-      <div data-testid="hasRefreshOrg">{typeof org.refreshOrganisations === 'function' ? 'true' : 'false'}</div>
-    </div>
+    <section data-testid="test-component">
+      <p data-testid="organisations-count">{org.organisations.length}</p>
+      <p data-testid="isLoading">{org.isLoading ? 'true' : 'false'}</p>
+      <p data-testid="error">{org.error?.message || 'no-error'}</p>
+      <p data-testid="selectedOrg">{org.selectedOrganisation?.name || org.selectedOrganisation?.display_name || 'no-org'}</p>
+      <p data-testid="hasValidContext">{org.hasValidOrganisationContext ? 'true' : 'false'}</p>
+      <p data-testid="hasSetSelectedOrg">{typeof org.setSelectedOrganisation === 'function' ? 'true' : 'false'}</p>
+      <p data-testid="hasRefreshOrg">{typeof org.refreshOrganisations === 'function' ? 'true' : 'false'}</p>
+    </section>
   );
 };
 
@@ -168,7 +168,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      expect(screen.getByTestId('test-component')).toBeDefined();
       
       // Wait for organisations to load - OrganisationService initializes asynchronously
       // The service calls notify() in finally block, and useOrganisationService has 50ms debounce
@@ -203,7 +203,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      expect(screen.getByTestId('test-component')).toBeDefined();
     });
   });
 
@@ -255,9 +255,9 @@ describe('OrganisationProvider', () => {
       const TestHookComponent = () => {
         try {
           const org = useOrganisations();
-          return <div data-testid="hook-success">Hook works</div>;
+          return <p data-testid="hook-success">Hook works</p>;
         } catch (error) {
-          return <div data-testid="hook-error">Hook failed</div>;
+          return <p data-testid="hook-error">Hook failed</p>;
         }
       };
 
@@ -267,7 +267,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('hook-success')).toBeInTheDocument();
+      expect(screen.getByTestId('hook-success')).toBeDefined();
     });
   });
 
@@ -279,7 +279,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      expect(screen.getByTestId('test-component')).toBeDefined();
       // Without supabase client, organisations won't load, so count should be 0
       expect(screen.getByTestId('organisations-count')).toHaveTextContent('0');
     });
@@ -291,7 +291,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      expect(screen.getByTestId('test-component')).toBeDefined();
     });
 
     it('handles missing session', () => {
@@ -301,7 +301,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      expect(screen.getByTestId('test-component')).toBeDefined();
     });
   });
 
@@ -311,11 +311,11 @@ describe('OrganisationProvider', () => {
         const { organisations, isLoading, error } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="orgs-loaded">{organisations.length}</div>
-            <div data-testid="loading-status">{isLoading ? 'loading' : 'ready'}</div>
-            <div data-testid="error-status">{error ? 'error' : 'no-error'}</div>
-          </div>
+          <section>
+            <p data-testid="orgs-loaded">{organisations.length}</p>
+            <p data-testid="loading-status">{isLoading ? 'loading' : 'ready'}</p>
+            <p data-testid="error-status">{error ? 'error' : 'no-error'}</p>
+          </section>
         );
       };
 
@@ -325,7 +325,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('orgs-loaded')).toBeInTheDocument();
+      expect(screen.getByTestId('orgs-loaded')).toBeDefined();
       expect(screen.getByTestId('loading-status')).toHaveTextContent('ready');
       expect(screen.getByTestId('error-status')).toHaveTextContent('no-error');
     });
@@ -335,15 +335,15 @@ describe('OrganisationProvider', () => {
         const { organisations, setSelectedOrganisation, selectedOrganisation } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="selected-org">{selectedOrganisation?.name || selectedOrganisation?.display_name || 'none'}</div>
+          <section>
+            <p data-testid="selected-org">{selectedOrganisation?.name || selectedOrganisation?.display_name || 'none'}</p>
             <button 
               data-testid="select-org-btn"
               onClick={() => setSelectedOrganisation(organisations[0] || null)}
             >
               Select First
             </button>
-          </div>
+          </section>
         );
       };
 
@@ -353,8 +353,8 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('selected-org')).toBeInTheDocument();
-      expect(screen.getByTestId('select-org-btn')).toBeInTheDocument();
+      expect(screen.getByTestId('selected-org')).toBeDefined();
+      expect(screen.getByTestId('select-org-btn')).toBeDefined();
     });
 
     it('handles organisation switching', () => {
@@ -362,8 +362,8 @@ describe('OrganisationProvider', () => {
         const { organisations, setSelectedOrganisation, selectedOrganisation } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="current-org">{selectedOrganisation?.name || selectedOrganisation?.display_name || 'none'}</div>
+          <section>
+            <p data-testid="current-org">{selectedOrganisation?.name || selectedOrganisation?.display_name || 'none'}</p>
             <button 
               data-testid="switch-org-btn"
               onClick={() => {
@@ -374,7 +374,7 @@ describe('OrganisationProvider', () => {
             >
               Switch Org
             </button>
-          </div>
+          </section>
         );
       };
 
@@ -384,8 +384,8 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('current-org')).toBeInTheDocument();
-      expect(screen.getByTestId('switch-org-btn')).toBeInTheDocument();
+      expect(screen.getByTestId('current-org')).toBeDefined();
+      expect(screen.getByTestId('switch-org-btn')).toBeDefined();
     });
   });
 
@@ -395,10 +395,10 @@ describe('OrganisationProvider', () => {
         const { hasValidOrganisationContext, selectedOrganisation } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="valid-context">{hasValidOrganisationContext ? 'valid' : 'invalid'}</div>
-            <div data-testid="context-status">{selectedOrganisation ? 'set' : 'not-set'}</div>
-          </div>
+          <section>
+            <p data-testid="valid-context">{hasValidOrganisationContext ? 'valid' : 'invalid'}</p>
+            <p data-testid="context-status">{selectedOrganisation ? 'set' : 'not-set'}</p>
+          </section>
         );
       };
 
@@ -408,8 +408,8 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('valid-context')).toBeInTheDocument();
-      expect(screen.getByTestId('context-status')).toBeInTheDocument();
+      expect(screen.getByTestId('valid-context')).toBeDefined();
+      expect(screen.getByTestId('context-status')).toBeDefined();
     });
 
     it('provides organisation refresh functionality', () => {
@@ -417,11 +417,11 @@ describe('OrganisationProvider', () => {
         const { refreshOrganisations } = useOrganisations();
         
         return (
-          <div>
+          <section>
             <button data-testid="refresh-org-btn" onClick={() => refreshOrganisations()}>
               Refresh Organisations
             </button>
-          </div>
+          </section>
         );
       };
 
@@ -432,7 +432,7 @@ describe('OrganisationProvider', () => {
       );
 
       const btn = screen.getByTestId('refresh-org-btn');
-      expect(btn).toBeInTheDocument();
+      expect(btn).toBeDefined();
       
       // Click refresh
       fireEvent.click(btn);
@@ -444,12 +444,12 @@ describe('OrganisationProvider', () => {
         const { selectedOrganisation, organisations } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="org-state">
+          <section>
+            <p data-testid="org-state">
               {selectedOrganisation ? (selectedOrganisation.name || selectedOrganisation.display_name) : 'none'}
-            </div>
-            <div data-testid="orgs-count">{organisations.length}</div>
-          </div>
+            </p>
+            <p data-testid="orgs-count">{organisations.length}</p>
+          </section>
         );
       };
 
@@ -473,7 +473,7 @@ describe('OrganisationProvider', () => {
       // After re-render, state should remain stable
       const orgStateAfter = screen.getByTestId('org-state').textContent;
       expect(orgStateAfter).toBe(orgState); // State should be stable
-      expect(screen.getByTestId('orgs-count')).toBeInTheDocument();
+      expect(screen.getByTestId('orgs-count')).toBeDefined();
     });
   });
 
@@ -483,10 +483,10 @@ describe('OrganisationProvider', () => {
         const { selectedOrganisation, organisations } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="auth-integrated">integrated</div>
-            <div data-testid="orgs-available">{organisations.length > 0 ? 'yes' : 'no'}</div>
-          </div>
+          <section>
+            <p data-testid="auth-integrated">integrated</p>
+            <p data-testid="orgs-available">{organisations.length > 0 ? 'yes' : 'no'}</p>
+          </section>
         );
       };
 
@@ -506,8 +506,8 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('auth-integrated')).toBeInTheDocument();
-      expect(screen.getByTestId('orgs-available')).toBeInTheDocument();
+      expect(screen.getByTestId('auth-integrated')).toBeDefined();
+      expect(screen.getByTestId('orgs-available')).toBeDefined();
     });
 
     it('handles missing auth gracefully', () => {
@@ -515,11 +515,11 @@ describe('OrganisationProvider', () => {
         const { organisations, selectedOrganisation } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="orgs-count">{organisations.length}</div>
-            <div data-testid="has-selection">{selectedOrganisation ? 'yes' : 'no'}</div>
-            <div data-testid="orgs-array-exists">{Array.isArray(organisations) ? 'yes' : 'no'}</div>
-          </div>
+          <section>
+            <p data-testid="orgs-count">{organisations.length}</p>
+            <p data-testid="has-selection">{selectedOrganisation ? 'yes' : 'no'}</p>
+            <p data-testid="orgs-array-exists">{Array.isArray(organisations) ? 'yes' : 'no'}</p>
+          </section>
         );
       };
 
@@ -529,10 +529,10 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('orgs-count')).toBeInTheDocument();
+      expect(screen.getByTestId('orgs-count')).toBeDefined();
       expect(screen.getByTestId('orgs-array-exists')).toHaveTextContent('yes');
       // Mock might return data, so we just check the structure exists
-      expect(screen.getByTestId('has-selection')).toBeInTheDocument();
+      expect(screen.getByTestId('has-selection')).toBeDefined();
     });
 
     it('supports organisation hierarchy', () => {
@@ -540,10 +540,10 @@ describe('OrganisationProvider', () => {
         const { organisations, selectedOrganisation } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="has-organisations">{organisations.length > 0 ? 'yes' : 'no'}</div>
-            <div data-testid="hierarchy-supported">supported</div>
-          </div>
+          <section>
+            <p data-testid="has-organisations">{organisations.length > 0 ? 'yes' : 'no'}</p>
+            <p data-testid="hierarchy-supported">supported</p>
+          </section>
         );
       };
 
@@ -553,7 +553,7 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('has-organisations')).toBeInTheDocument();
+      expect(screen.getByTestId('has-organisations')).toBeDefined();
       expect(screen.getByTestId('hierarchy-supported')).toHaveTextContent('supported');
     });
   });
@@ -564,10 +564,10 @@ describe('OrganisationProvider', () => {
         const { error, organisations } = useOrganisations();
         
         return (
-          <div>
-            <div data-testid="error-state">{error ? 'has-error' : 'no-error'}</div>
-            <div data-testid="orgs-available">{organisations.length}</div>
-          </div>
+          <section>
+            <p data-testid="error-state">{error ? 'has-error' : 'no-error'}</p>
+            <p data-testid="orgs-available">{organisations.length}</p>
+          </section>
         );
       };
 
@@ -577,8 +577,8 @@ describe('OrganisationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('error-state')).toBeInTheDocument();
-      expect(screen.getByTestId('orgs-available')).toBeInTheDocument();
+      expect(screen.getByTestId('error-state')).toBeDefined();
+      expect(screen.getByTestId('orgs-available')).toBeDefined();
     });
 
     it('maintains stability with rapid operations', () => {
@@ -586,7 +586,7 @@ describe('OrganisationProvider', () => {
         const { setSelectedOrganisation, refreshOrganisations, organisations } = useOrganisations();
         
         return (
-          <div>
+          <section>
             <button 
               data-testid="rapid-ops-btn"
               onClick={() => {
@@ -596,7 +596,7 @@ describe('OrganisationProvider', () => {
             >
               Rapid Ops
             </button>
-          </div>
+          </section>
         );
       };
 
@@ -611,7 +611,7 @@ describe('OrganisationProvider', () => {
       fireEvent.click(btn);
       fireEvent.click(btn);
       
-      expect(btn).toBeInTheDocument();
+      expect(btn).toBeDefined();
     });
   });
 });

package/src/providers/__tests__/ProviderLifecycle.test.tsx

@@ -14,7 +14,7 @@ import { createMockSupabaseClient } from '../../__tests__/helpers/supabaseMock';
 
 // Mock providers
 vi.mock('../AuthProvider', () => ({
-  AuthProvider: ({ children }: { children: ReactNode }) => <div data-testid="auth-provider">{children}</div>,
+  AuthProvider: ({ children }: { children: ReactNode }) => <section data-testid="auth-provider">{children}</section>,
   useAuth: () => ({
     user: { id: 'test-user' },
     session: {},
@@ -24,7 +24,7 @@ vi.mock('../AuthProvider', () => ({
 }));
 
 vi.mock('../OrganisationProvider', () => ({
-  OrganisationProvider: ({ children }: { children: ReactNode }) => <div data-testid="org-provider">{children}</div>,
+  OrganisationProvider: ({ children }: { children: ReactNode }) => <section data-testid="org-provider">{children}</section>,
   useOrganisations: () => ({
     selectedOrganisation: { id: 'test-org' },
     isContextReady: true,
@@ -44,28 +44,28 @@ describe('Provider Lifecycle Tests', () => {
 
   describe('Provider Initialization', () => {
     it('should initialize provider without errors', () => {
-      const TestComponent = () => <div data-testid="child">Test</div>;
+      const TestComponent = () => <p data-testid="child">Test</p>;
 
       render(<TestComponent />);
       
-      expect(screen.getByTestId('child')).toBeInTheDocument();
+      expect(screen.getByTestId('child')).toBeDefined();
     });
 
     it('should handle nested provider hierarchies', () => {
       const ChildProvider = ({ children }: { children: ReactNode }) => (
-        <div data-testid="child-provider">{children}</div>
+        <section data-testid="child-provider">{children}</section>
       );
       
       const TestComponent = () => (
         <ChildProvider>
-          <div data-testid="nested-child">Nested</div>
+          <p data-testid="nested-child">Nested</p>
         </ChildProvider>
       );
 
       render(<TestComponent />);
       
-      expect(screen.getByTestId('child-provider')).toBeInTheDocument();
-      expect(screen.getByTestId('nested-child')).toBeInTheDocument();
+      expect(screen.getByTestId('child-provider')).toBeDefined();
+      expect(screen.getByTestId('nested-child')).toBeDefined();
     });
   });
 
@@ -73,12 +73,12 @@ describe('Provider Lifecycle Tests', () => {
     it('should cleanup on unmount without errors', () => {
       const TestComponent = ({ isVisible }: { isVisible: boolean }) => {
         if (!isVisible) return null;
-        return <div data-testid="cleanup-test">Cleanup</div>;
+        return <p data-testid="cleanup-test">Cleanup</p>;
       };
 
       const { rerender } = render(<TestComponent isVisible={true} />);
       
-      expect(screen.getByTestId('cleanup-test')).toBeInTheDocument();
+      expect(screen.getByTestId('cleanup-test')).toBeDefined();
       
       rerender(<TestComponent isVisible={false} />);
       
@@ -95,12 +95,12 @@ describe('Provider Lifecycle Tests', () => {
             cleanupRef.current();
           };
         }, []);
-        return <div data-testid="listener-test">Test</div>;
+        return <p data-testid="listener-test">Test</p>;
       };
 
       const { unmount: unmountComponent } = render(<TestComponent />);
       
-      expect(screen.getByTestId('listener-test')).toBeInTheDocument();
+      expect(screen.getByTestId('listener-test')).toBeDefined();
       
       act(() => {
         unmountComponent();
@@ -123,7 +123,7 @@ describe('Provider Lifecycle Tests', () => {
         React.useEffect(() => {
           return () => cleanup2Ref.current();
         }, []);
-        return <div data-testid="multi-listener">Test</div>;
+        return <p data-testid="multi-listener">Test</p>;
       };
 
       const { unmount: unmountComponent } = render(<TestComponent />);
@@ -140,7 +140,7 @@ describe('Provider Lifecycle Tests', () => {
   describe('Provider State Management', () => {
     it('should persist state between re-renders', () => {
       const TestComponent = ({ count }: { count: number }) => (
-        <div data-testid="state-test">{count}</div>
+        <p data-testid="state-test">{count}</p>
       );
 
       const { rerender } = render(<TestComponent count={1} />);
@@ -157,12 +157,12 @@ describe('Provider Lifecycle Tests', () => {
         const [count, setCount] = useState(0);
         
         return (
-          <div>
-            <div data-testid="count">{count}</div>
+          <section>
+            <p data-testid="count">{count}</p>
             <button data-testid="increment" onClick={() => setCount(c => c + 1)}>
               Increment
             </button>
-          </div>
+          </section>
         );
       };
 
@@ -184,7 +184,7 @@ describe('Provider Lifecycle Tests', () => {
           Promise.resolve('async-data').then(setData);
         }, []);
         
-        return <div data-testid="async-state">{data || 'loading'}</div>;
+        return <p data-testid="async-state">{data || 'loading'}</p>;
       };
 
       render(<AsyncComponent />);
@@ -202,14 +202,14 @@ describe('Provider Lifecycle Tests', () => {
       // Test that providers handle initialization gracefully
       const ErrorProvider = ({ children }: { children: ReactNode }) => {
         try {
-          return <div data-testid="error-provider">{children}</div>;
+          return <section data-testid="error-provider">{children}</section>;
         } catch (error) {
           console.error('Provider initialization error:', error);
-          return <div data-testid="error-fallback">Error handled</div>;
+          return <p data-testid="error-fallback">Error handled</p>;
         }
       };
 
-      const TestComponent = () => <div data-testid="child">Test</div>;
+      const TestComponent = () => <p data-testid="child">Test</p>;
 
       render(
         <ErrorProvider>
@@ -218,8 +218,8 @@ describe('Provider Lifecycle Tests', () => {
       );
 
       // Provider should render children successfully
-      expect(screen.getByTestId('error-provider')).toBeInTheDocument();
-      expect(screen.getByTestId('child')).toBeInTheDocument();
+      expect(screen.getByTestId('error-provider')).toBeDefined();
+      expect(screen.getByTestId('child')).toBeDefined();
     });
 
     it('should recover from errors in provider lifecycle', () => {
@@ -230,7 +230,7 @@ describe('Provider Lifecycle Tests', () => {
           shouldError = false; // Recover on next render
           throw new Error('Test error');
         }
-        return <div data-testid="recoverable-provider">{children}</div>;
+        return <section data-testid="recoverable-provider">{children}</section>;
       };
 
       // Use Error Boundary pattern
@@ -259,10 +259,10 @@ describe('Provider Lifecycle Tests', () => {
         }
       }
 
-      const TestComponent = () => <div data-testid="child">Test</div>;
+      const TestComponent = () => <p data-testid="child">Test</p>;
 
       const { rerender } = render(
-        <ErrorBoundary fallback={<div data-testid="error-boundary">Error</div>}>
+        <ErrorBoundary fallback={<p data-testid="error-boundary">Error</p>}>
           <RecoverableProvider>
             <TestComponent />
           </RecoverableProvider>
@@ -270,8 +270,8 @@ describe('Provider Lifecycle Tests', () => {
       );
 
       // Initially should render successfully
-      expect(screen.getByTestId('recoverable-provider')).toBeInTheDocument();
-      expect(screen.getByTestId('child')).toBeInTheDocument();
+      expect(screen.getByTestId('recoverable-provider')).toBeDefined();
+      expect(screen.getByTestId('child')).toBeDefined();
     });
   });
 
@@ -288,7 +288,7 @@ describe('Provider Lifecycle Tests', () => {
           return () => clearInterval(timer);
         }, []);
         
-        return <div data-testid="timer-count">{count}</div>;
+        return <p data-testid="timer-count">{count}</p>;
       };
 
       const { unmount } = render(<TimerComponent />);
@@ -310,7 +310,7 @@ describe('Provider Lifecycle Tests', () => {
           };
         }, []);
         
-        return <div data-testid="listener-component">Test</div>;
+        return <p data-testid="listener-component">Test</p>;
       };
 
       const { unmount } = render(<EventListenerComponent />);
@@ -328,7 +328,7 @@ describe('Provider Lifecycle Tests', () => {
       
       const OptimizedComponent = React.memo(() => {
         renderCount();
-        return <div data-testid="optimized">Test</div>;
+        return <p data-testid="optimized">Test</p>;
       });
 
       const { rerender } = render(
@@ -348,7 +348,7 @@ describe('Provider Lifecycle Tests', () => {
       
       const StateComponent = ({ value }: { value: number }) => {
         renderCount();
-        return <div data-testid="state-render">{value}</div>;
+        return <p data-testid="state-render">{value}</p>;
       };
 
       const { rerender } = render(<StateComponent value={1} />);
@@ -364,7 +364,7 @@ describe('Provider Lifecycle Tests', () => {
 
   describe('Provider Edge Cases', () => {
     it('should handle rapid mount/unmount cycles', () => {
-      const RapidComponent = () => <div data-testid="rapid">Rapid</div>;
+      const RapidComponent = () => <p data-testid="rapid">Rapid</p>;
 
       for (let i = 0; i < 10; i++) {
         const { unmount } = render(<RapidComponent />);
@@ -376,16 +376,16 @@ describe('Provider Lifecycle Tests', () => {
     });
 
     it('should handle component with no children', () => {
-      const EmptyProvider = () => <div data-testid="empty">Empty</div>;
+      const EmptyProvider = () => <p data-testid="empty">Empty</p>;
 
       render(<EmptyProvider />);
       
-      expect(screen.getByTestId('empty')).toBeInTheDocument();
+      expect(screen.getByTestId('empty')).toBeDefined();
     });
 
     it('should handle null children gracefully', () => {
       const NullProvider = ({ children }: { children: ReactNode }) => (
-        <div data-testid="null-provider">{children || 'No children'}</div>
+        <section data-testid="null-provider">{children || 'No children'}</section>
       );
 
       render(<NullProvider>{null}</NullProvider>);
@@ -415,7 +415,7 @@ class ErrorBoundary extends React.Component<
 
   render() {
     if (this.state.hasError) {
-      return <div data-testid="error-boundary">Something went wrong</div>;
+      return <p data-testid="error-boundary">Something went wrong</p>;
     }
 
     return this.props.children;