diff --git a/src/components/Badges/BadgesRow.tsx b/src/components/Badges/BadgesRow.tsx
index 696550bda0..f13940f564 100644
--- a/src/components/Badges/BadgesRow.tsx
+++ b/src/components/Badges/BadgesRow.tsx
@@ -38,7 +38,7 @@ const BadgesRow = ({ badges, className, isSelfProfile = true }: BadgesRowProps)
// sort by earnedAt, newest first
const sortedBadges = useMemo(() => {
- return badges.sort((a, b) => {
+ return [...badges].sort((a, b) => {
const at = a.earnedAt ? new Date(a.earnedAt).getTime() : 0
const bt = b.earnedAt ? new Date(b.earnedAt).getTime() : 0
return bt - at
diff --git a/src/components/Badges/__tests__/BadgesRow.test.tsx b/src/components/Badges/__tests__/BadgesRow.test.tsx
new file mode 100644
index 0000000000..b5bd3cf17d
--- /dev/null
+++ b/src/components/Badges/__tests__/BadgesRow.test.tsx
@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react'
+import type { ComponentProps } from 'react'
+import BadgesRow from '@/components/Badges/BadgesRow'
+
+jest.mock('next/image', () => ({
+ __esModule: true,
+ default: ({ unoptimized, fill, ...rest }: ComponentProps<'img'> & { unoptimized?: boolean; fill?: boolean }) => (
+
+ ),
+}))
+
+jest.mock('@/components/Tooltip', () => ({
+ Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}>,
+}))
+
+const badge = (code: string, earnedAt: string) => ({
+ code,
+ name: code,
+ description: null,
+ iconUrl: null,
+ earnedAt,
+})
+
+describe('BadgesRow', () => {
+ it('does not mutate the badges array it is given', () => {
+ // Oldest first, so a newest-first sort has to reorder them.
+ const badges = [
+ badge('OLDEST', '2024-01-01T00:00:00.000Z'),
+ badge('MIDDLE', '2024-06-01T00:00:00.000Z'),
+ badge('NEWEST', '2024-12-01T00:00:00.000Z'),
+ ]
+
+ render()
+
+ expect(badges.map((b) => b.code)).toEqual(['OLDEST', 'MIDDLE', 'NEWEST'])
+ })
+})