tests: add pageleave sanity checks

Author: lricoy

playground/nextjs/src/posthog.ts

@@ -59,6 +59,7 @@ if (typeof window !== 'undefined') {
             ignoreClass: 'ph-ignore-image',
         },
         debug: true,
+        capture_pageview: 'history_change',
         disable_web_experiments: false,
         scroll_root_selector: ['#scroll_element', 'html'],
         persistence: cookieConsentGiven() ? 'localStorage+cookie' : 'memory',

playground/react-router/app/root.tsx

@@ -1,10 +1,9 @@
-import { PostHogProvider, usePostHog } from 'posthog-js/react'
+import { PostHogProvider } from 'posthog-js/react'
 import type { PostHogConfig } from 'posthog-js'
 
-import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration, useLocation } from 'react-router'
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
 import type { Route } from './+types/root'
 import './app.css'
-import { useEffect } from 'react'
 
 export const links: Route.LinksFunction = () => [
     { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
@@ -40,7 +39,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 const posthogKey: string = import.meta.env.VITE_PUBLIC_POSTHOG_KEY!
 const posthogOptions: Partial<PostHogConfig> = {
     api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
-    capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+    capture_pageview: 'history_change',
     capture_pageleave: true,
     debug: true,
 }
@@ -54,12 +53,6 @@ export default function App() {
 }
 
 export function AppInner() {
-    const posthog = usePostHog()
-    const location = useLocation()
-    useEffect(() => {
-        posthog.capture('$pageview')
-    }, [posthog, location])
-
     return <Outlet />
 }
 

src/__tests__/posthog-core.ts

@@ -684,6 +684,21 @@ describe('posthog core', () => {
             expect(posthog.capture).toHaveBeenCalledWith('$pageleave')
         })
 
+        it('captures $pageleave when capture_pageview is set to history_change', () => {
+            const posthog = posthogWith(
+                {
+                    capture_pageview: 'history_change',
+                    capture_pageleave: 'if_capture_pageview',
+                    request_batching: true,
+                },
+                { capture: jest.fn() }
+            )
+
+            posthog._handle_unload()
+
+            expect(posthog.capture).toHaveBeenCalledWith('$pageleave')
+        })
+
         it('does not capture $pageleave when capture_pageview=false and capture_pageleave=if_capture_pageview', () => {
             const posthog = posthogWith(
                 {
@@ -744,6 +759,20 @@ describe('posthog core', () => {
                 expect(posthog.capture).toHaveBeenCalledWith('$pageleave', null, { transport: 'sendBeacon' })
             })
 
+            it('captures $pageleave when capture_pageview is set to history_change', () => {
+                const posthog = posthogWith(
+                    {
+                        capture_pageview: 'history_change',
+                        capture_pageleave: 'if_capture_pageview',
+                        request_batching: false,
+                    },
+                    { capture: jest.fn() }
+                )
+                posthog._handle_unload()
+
+                expect(posthog.capture).toHaveBeenCalledWith('$pageleave', null, { transport: 'sendBeacon' })
+            })
+
             it('does not capture $pageleave when capture_pageview=false', () => {
                 const posthog = posthogWith(
                     {