Barazo default frontend
barazo.forum
fix(test): stabilize auth mocks to prevent infinite re-render loops (#73)
The useAuth mock created new function references on every call, causing
components with getAccessToken in useCallback/useEffect deps to enter
infinite re-render loops. Extract mock object to a stable reference.
Also add maxWorkers (cpuCount/2) and testTimeout (10s) to vitest config
to reduce CPU contention and give axe-core tests adequate time.
authored by
Guido X Jansen
and committed by
GitHub
209b626f
a518b0f3
+65
-48
+5
-4
src/app/admin/categories/page.test.tsx
+5
-4
src/app/admin/categories/page.test.tsx
···
32
32
},
33
33
}))
34
34
35
-
vi.mock('@/hooks/use-auth', () => ({
36
-
useAuth: () => ({
35
+
vi.mock('@/hooks/use-auth', () => {
36
+
const mockAuth = {
37
37
user: {
38
38
did: 'did:plc:user-alice-001',
39
39
handle: 'alice.bsky.social',
···
47
47
logout: vi.fn(),
48
48
setSessionFromCallback: vi.fn(),
49
49
authFetch: vi.fn(),
50
-
}),
51
-
}))
50
+
}
51
+
return { useAuth: () => mockAuth }
52
+
})
52
53
53
54
describe('AdminCategoriesPage', () => {
54
55
it('renders categories heading', () => {
+5
-4
src/app/admin/moderation/page.test.tsx
+5
-4
src/app/admin/moderation/page.test.tsx
···
32
32
},
33
33
}))
34
34
35
-
vi.mock('@/hooks/use-auth', () => ({
36
-
useAuth: () => ({
35
+
vi.mock('@/hooks/use-auth', () => {
36
+
const mockAuth = {
37
37
user: {
38
38
did: 'did:plc:user-alice-001',
39
39
handle: 'alice.bsky.social',
···
47
47
logout: vi.fn(),
48
48
setSessionFromCallback: vi.fn(),
49
49
authFetch: vi.fn(),
50
-
}),
51
-
}))
50
+
}
51
+
return { useAuth: () => mockAuth }
52
+
})
52
53
53
54
describe('AdminModerationPage', () => {
54
55
it('renders moderation heading', () => {
+5
-4
src/app/admin/onboarding/page.test.tsx
+5
-4
src/app/admin/onboarding/page.test.tsx
···
32
32
},
33
33
}))
34
34
35
-
vi.mock('@/hooks/use-auth', () => ({
36
-
useAuth: () => ({
35
+
vi.mock('@/hooks/use-auth', () => {
36
+
const mockAuth = {
37
37
user: {
38
38
did: 'did:plc:user-alice-001',
39
39
handle: 'alice.bsky.social',
···
47
47
logout: vi.fn(),
48
48
setSessionFromCallback: vi.fn(),
49
49
authFetch: vi.fn(),
50
-
}),
51
-
}))
50
+
}
51
+
return { useAuth: () => mockAuth }
52
+
})
52
53
53
54
describe('AdminOnboardingPage', () => {
54
55
it('renders onboarding fields heading', () => {
+5
-4
src/app/admin/page.test.tsx
+5
-4
src/app/admin/page.test.tsx
···
31
31
},
32
32
}))
33
33
34
-
vi.mock('@/hooks/use-auth', () => ({
35
-
useAuth: () => ({
34
+
vi.mock('@/hooks/use-auth', () => {
35
+
const mockAuth = {
36
36
user: {
37
37
did: 'did:plc:user-alice-001',
38
38
handle: 'alice.bsky.social',
···
46
46
logout: vi.fn(),
47
47
setSessionFromCallback: vi.fn(),
48
48
authFetch: vi.fn(),
49
-
}),
50
-
}))
49
+
}
50
+
return { useAuth: () => mockAuth }
51
+
})
51
52
52
53
describe('AdminDashboardPage', () => {
53
54
it('renders dashboard heading', async () => {
+5
-4
src/app/admin/plugins/page.test.tsx
+5
-4
src/app/admin/plugins/page.test.tsx
···
14
14
usePathname: () => '/admin/plugins',
15
15
}))
16
16
17
-
vi.mock('@/hooks/use-auth', () => ({
18
-
useAuth: () => ({
17
+
vi.mock('@/hooks/use-auth', () => {
18
+
const mockAuth = {
19
19
user: {
20
20
did: 'did:plc:user-alice-001',
21
21
handle: 'alice.bsky.social',
···
29
29
logout: vi.fn(),
30
30
setSessionFromCallback: vi.fn(),
31
31
authFetch: vi.fn(),
32
-
}),
33
-
}))
32
+
}
33
+
return { useAuth: () => mockAuth }
34
+
})
34
35
35
36
describe('AdminPluginsPage', () => {
36
37
it('renders page heading', async () => {
+5
-4
src/app/admin/settings/page.test.tsx
+5
-4
src/app/admin/settings/page.test.tsx
···
32
32
},
33
33
}))
34
34
35
-
vi.mock('@/hooks/use-auth', () => ({
36
-
useAuth: () => ({
35
+
vi.mock('@/hooks/use-auth', () => {
36
+
const mockAuth = {
37
37
user: {
38
38
did: 'did:plc:user-alice-001',
39
39
handle: 'alice.bsky.social',
···
47
47
logout: vi.fn(),
48
48
setSessionFromCallback: vi.fn(),
49
49
authFetch: vi.fn(),
50
-
}),
51
-
}))
50
+
}
51
+
return { useAuth: () => mockAuth }
52
+
})
52
53
53
54
describe('AdminSettingsPage', () => {
54
55
it('renders community settings heading', () => {
+5
-4
src/app/admin/sybil-detection/page.test.tsx
+5
-4
src/app/admin/sybil-detection/page.test.tsx
···
33
33
},
34
34
}))
35
35
36
-
vi.mock('@/hooks/use-auth', () => ({
37
-
useAuth: () => ({
36
+
vi.mock('@/hooks/use-auth', () => {
37
+
const mockAuth = {
38
38
user: {
39
39
did: 'did:plc:user-alice-001',
40
40
handle: 'alice.bsky.social',
···
48
48
logout: vi.fn(),
49
49
setSessionFromCallback: vi.fn(),
50
50
authFetch: vi.fn(),
51
-
}),
52
-
}))
51
+
}
52
+
return { useAuth: () => mockAuth }
53
+
})
53
54
54
55
describe('AdminSybilDetectionPage', () => {
55
56
it('renders heading and explanation text', async () => {
+5
-4
src/app/admin/trust-seeds/page.test.tsx
+5
-4
src/app/admin/trust-seeds/page.test.tsx
···
33
33
},
34
34
}))
35
35
36
-
vi.mock('@/hooks/use-auth', () => ({
37
-
useAuth: () => ({
36
+
vi.mock('@/hooks/use-auth', () => {
37
+
const mockAuth = {
38
38
user: {
39
39
did: 'did:plc:user-alice-001',
40
40
handle: 'alice.bsky.social',
···
48
48
logout: vi.fn(),
49
49
setSessionFromCallback: vi.fn(),
50
50
authFetch: vi.fn(),
51
-
}),
52
-
}))
51
+
}
52
+
return { useAuth: () => mockAuth }
53
+
})
53
54
54
55
describe('AdminTrustSeedsPage', () => {
55
56
it('renders heading and help text', async () => {
+5
-4
src/app/admin/users/page.test.tsx
+5
-4
src/app/admin/users/page.test.tsx
···
31
31
},
32
32
}))
33
33
34
-
vi.mock('@/hooks/use-auth', () => ({
35
-
useAuth: () => ({
34
+
vi.mock('@/hooks/use-auth', () => {
35
+
const mockAuth = {
36
36
user: {
37
37
did: 'did:plc:user-alice-001',
38
38
handle: 'alice.bsky.social',
···
46
46
logout: vi.fn(),
47
47
setSessionFromCallback: vi.fn(),
48
48
authFetch: vi.fn(),
49
-
}),
50
-
}))
49
+
}
50
+
return { useAuth: () => mockAuth }
51
+
})
51
52
52
53
describe('AdminUsersPage', () => {
53
54
it('renders user management heading', () => {
+5
-4
src/app/notifications/page.test.tsx
+5
-4
src/app/notifications/page.test.tsx
···
46
46
markNotificationsRead: vi.fn(),
47
47
}))
48
48
49
-
vi.mock('@/hooks/use-auth', () => ({
50
-
useAuth: () => ({
49
+
vi.mock('@/hooks/use-auth', () => {
50
+
const mockAuth = {
51
51
user: {
52
52
did: 'did:plc:user-alice-001',
53
53
handle: 'alice.bsky.social',
···
61
61
logout: vi.fn(),
62
62
setSessionFromCallback: vi.fn(),
63
63
authFetch: vi.fn(),
64
-
}),
65
-
}))
64
+
}
65
+
return { useAuth: () => mockAuth }
66
+
})
66
67
67
68
import { getNotifications, markNotificationsRead } from '@/lib/api/client'
68
69
+5
-4
src/app/settings/page.test.tsx
+5
-4
src/app/settings/page.test.tsx
···
17
17
redirect: vi.fn(),
18
18
}))
19
19
20
-
vi.mock('@/hooks/use-auth', () => ({
21
-
useAuth: () => ({
20
+
vi.mock('@/hooks/use-auth', () => {
21
+
const mockAuth = {
22
22
user: {
23
23
did: 'did:plc:user-alice-001',
24
24
handle: 'alice.bsky.social',
···
34
34
setSessionFromCallback: vi.fn(),
35
35
requestCrossPostAuth: vi.fn(),
36
36
authFetch: vi.fn(),
37
-
}),
38
-
}))
37
+
}
38
+
return { useAuth: () => mockAuth }
39
+
})
39
40
40
41
// Mock localStorage for jsdom environment
41
42
const localStorageMock = (() => {
+5
-4
src/app/settings/reports/page.test.tsx
+5
-4
src/app/settings/reports/page.test.tsx
···
19
19
redirect: vi.fn(),
20
20
}))
21
21
22
-
vi.mock('@/hooks/use-auth', () => ({
23
-
useAuth: () => ({
22
+
vi.mock('@/hooks/use-auth', () => {
23
+
const mockAuth = {
24
24
user: {
25
25
did: 'did:plc:user-alice-001',
26
26
handle: 'alice.bsky.social',
···
34
34
logout: vi.fn(),
35
35
setSessionFromCallback: vi.fn(),
36
36
authFetch: vi.fn(),
37
-
}),
38
-
}))
37
+
}
38
+
return { useAuth: () => mockAuth }
39
+
})
39
40
40
41
describe('MyReportsPage', () => {
41
42
beforeEach(() => {
+5
vitest.config.ts
+5
vitest.config.ts
···
1
1
import { defineConfig } from 'vitest/config'
2
2
import react from '@vitejs/plugin-react'
3
3
import path from 'path'
4
+
import os from 'os'
5
+
6
+
const cpuCount = os.availableParallelism?.() ?? os.cpus().length
4
7
5
8
export default defineConfig({
6
9
plugins: [react()],
···
9
12
environment: 'jsdom',
10
13
setupFiles: ['./src/test/setup.ts'],
11
14
include: ['src/**/*.{test,spec}.{ts,tsx}'],
15
+
testTimeout: 10_000,
16
+
maxWorkers: Math.max(1, Math.floor(cpuCount / 2)),
12
17
coverage: {
13
18
provider: 'v8',
14
19
reporter: ['text', 'json', 'html'],