@oslokommune/punkt-react 15.4.6 → 15.4.7

package/CHANGELOG.md

@@ -5,6 +5,25 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [15.4.7](https://github.com/oslokommune/punkt/compare/15.4.6...15.4.7) (2026-03-05)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+* migrate from jest.fn to vi.fn in tests (#3346). - Fjernet jest.fn-shim fra react/src/setupTests.ts
+  - Erstattet jest.fn med vi.fn i alle React-tester og lagt til import { vi } from 'vitest' alle relevante steder
+
+
+---
+
+
 ## [15.4.6](https://github.com/oslokommune/punkt/compare/15.4.5...15.4.6) (2026-03-02)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "15.4.6",
+  "version": "15.4.7",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "03d974d6df2ab807ecb13eb54ec6073234bab2b5"
+  "gitHead": "53dc69a861f5e7a497bd946595ea9737df0bca5c"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent,render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createRef } from 'react'
 
 import { PktAccordion } from './Accordion'
@@ -22,7 +23,7 @@ describe('PktAccordion', () => {
   })
 
   test('renders children', () => {
-    const mockToggleOpen = jest.fn()
+    const mockToggleOpen = vi.fn()
     render(
       <PktAccordion>
         <PktAccordionItem title="Title 1" id="item1" onClick={mockToggleOpen}>
@@ -144,7 +145,7 @@ describe('PktAccordionItem', () => {
   })
 
   test('calls onClick handler', () => {
-    const mockOnClick = jest.fn()
+    const mockOnClick = vi.fn()
     const { container } = render(
       <PktAccordionItem title="Title" id="item1" onClick={mockOnClick}>
         Content

package/src/components/alert/Alert.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktAlert } from './Alert'
 
@@ -11,7 +12,7 @@ afterEach(cleanup)
 
 describe('PktAlert', () => {
   test('calls onClose when close button is clicked', async () => {
-    const onClose = jest.fn()
+    const onClose = vi.fn()
     const { getByLabelText } = render(
       <PktAlert closeAlert={true} onClose={onClose}>
         Hello World

package/src/components/backlink/BackLink.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktBackLink } from './BackLink'
 
@@ -23,7 +24,7 @@ describe('PktBackLink', () => {
   })
 
   it('calls onClick when clicked', async () => {
-    const onClickMock = jest.fn()
+    const onClickMock = vi.fn()
     const { getByText } = render(<PktBackLink text="Back" onClick={onClickMock} />)
     await window.customElements.whenDefined('pkt-backlink')
     const link = getByText('Back')

package/src/components/button/Button.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createRef } from 'react'
 import { useForm } from 'react-hook-form'
 
@@ -13,7 +14,7 @@ expect.extend(toHaveNoViolations)
 // Mock Form Component
 const MockForm = ({ buttonPosition }: { buttonPosition: 'inside' | 'outside' }) => {
   const { register, handleSubmit, reset } = useForm()
-  const onSubmit = jest.fn()
+  const onSubmit = vi.fn()
 
   return (
     <>
@@ -95,7 +96,7 @@ test('forwardRef works correctly', async () => {
 })
 
 test('PktButton triggers click when focused and enter is pressed', async () => {
-  const handleClick = jest.fn()
+  const handleClick = vi.fn()
   render(<PktButton onClick={handleClick}>trøkk her</PktButton>)
 
   const button = screen.getByRole('button', { name: /trøkk her/i })
@@ -108,7 +109,7 @@ test('PktButton triggers click when focused and enter is pressed', async () => {
 })
 
 test('PktButton triggers click when focused and space is pressed', async () => {
-  const handleClick = jest.fn()
+  const handleClick = vi.fn()
   render(<PktButton onClick={handleClick}>Trøkk igjen</PktButton>)
 
   const button = screen.getByRole('button')

package/src/components/calendar/Calendar.interaction.test.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { render, fireEvent, act } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import { PktCalendar, IPktCalendar } from './Calendar'
 
@@ -41,7 +42,7 @@ describe('PktCalendar', () => {
     })
 
     test('handles escape key', () => {
-      const onClose = jest.fn()
+      const onClose = vi.fn()
       const { container } = createCalendar({ onClose })
 
       const calendarEl = container.querySelector('.pkt-calendar') as HTMLElement

package/src/components/checkbox/Checkbox.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktCheckbox } from './Checkbox'
 
@@ -45,7 +46,7 @@ describe('PktCheckbox', () => {
   })
 
   test('handles onClick callback', async () => {
-    const onClickMock = jest.fn()
+    const onClickMock = vi.fn()
     const { getByLabelText } = render(<PktCheckbox id="myCheckbox" label="My Checkbox" onClick={onClickMock} />)
 
     // Get the checkbox label element

package/src/components/datepicker/Datepicker.accessibility.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { IPktDatepicker, PktDatepicker } from './Datepicker'
 
@@ -23,7 +24,7 @@ const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
 describe('PktDatepicker', () => {
   describe('Event handling', () => {
     test('dispatches onChange event when value changes', () => {
-      const handleChange = jest.fn()
+      const handleChange = vi.fn()
       const { container } = createDatepickerTest({
         onChange: handleChange,
       })
@@ -35,7 +36,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange event when value changes', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onValueChange: handleValueChange,
       })
@@ -67,8 +68,8 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches both onChange and onValueChange', () => {
-      const handleChange = jest.fn()
-      const handleValueChange = jest.fn()
+      const handleChange = vi.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onChange: handleChange,
         onValueChange: handleValueChange,

package/src/components/datepicker/Datepicker.input.test.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import { IPktDatepicker, PktDatepicker } from './Datepicker'
 
@@ -20,7 +21,7 @@ const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
 describe('PktDatepicker', () => {
   describe('Input field behavior', () => {
     test('allows manual date entry via change event', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onValueChange: handleValueChange,
       })
@@ -62,7 +63,7 @@ describe('PktDatepicker', () => {
     })
 
     test('clears value when empty string entered', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         value: '2024-06-15',
         onValueChange: handleValueChange,

package/src/components/datepicker/Datepicker.selection.test.tsx

@@ -32,7 +32,7 @@ describe('PktDatepicker', () => {
     })
 
     test('removes dates when clicking tag close button', async () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         multiple: true,
         value: ['2024-06-15', '2024-06-20'],
@@ -107,7 +107,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange with remaining dates when tag removed', async () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         multiple: true,
         value: ['2024-06-15', '2024-06-20', '2024-06-25'],
@@ -199,7 +199,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange for partial range (only from)', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         range: true,
         onValueChange: handleValueChange,
@@ -212,7 +212,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange when both range dates are present', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         range: true,
         value: ['2024-06-15'],
@@ -226,7 +226,7 @@ describe('PktDatepicker', () => {
     })
 
     test('validates range order on blur (rejects end before start)', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         range: true,
         value: ['2024-06-25', '2024-06-15'],
@@ -300,7 +300,7 @@ describe('PktDatepicker', () => {
 
   describe('Single date selection', () => {
     test('dispatches onChange when input value changes', () => {
-      const handleChange = jest.fn()
+      const handleChange = vi.fn()
       const { container } = createDatepickerTest({
         onChange: handleChange,
       })
@@ -312,7 +312,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange with array when input value changes', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onValueChange: handleValueChange,
       })
@@ -324,7 +324,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange with empty array when cleared', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         value: '2024-06-15',
         onValueChange: handleValueChange,

package/src/components/datepicker/Datepicker.validation.test.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import { IPktDatepicker, PktDatepicker } from './Datepicker'
 
@@ -301,7 +302,7 @@ describe('PktDatepicker', () => {
     })
 
     test('submits form on Enter key press', () => {
-      const submitHandler = jest.fn((e: Event) => e.preventDefault())
+      const submitHandler = vi.fn((e: Event) => e.preventDefault())
       const { container } = render(
         <form onSubmit={submitHandler as unknown as React.FormEventHandler}>
           <PktDatepicker id={datePickerId} label={label} value="2024-06-15" />

package/src/components/radio/RadioButton.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { PktRadioButton } from './RadioButton'
@@ -21,7 +22,7 @@ describe('PktRadiobutton', () => {
   })
 
   it('allows selecting one option from the group', async () => {
-    const handleChange = jest.fn()
+    const handleChange = vi.fn()
     const { container } = render(
       <PktInputWrapper forId="radioGroup" label="Etikett" hasFieldset>
         <PktRadioButton
@@ -42,7 +43,7 @@ describe('PktRadiobutton', () => {
     expect(option1).toBeInTheDocument()
     expect(option2).toBeInTheDocument()
 
-    const changeHandler = jest.fn()
+    const changeHandler = vi.fn()
     option2?.addEventListener('change', changeHandler)
 
     // Manually dispatch a change event

package/src/components/searchinput/SearchInput.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { ChangeEvent, useState } from 'react'
+import { vi } from 'vitest'
 
 import { PktSearchInput } from './SearchInput'
 
@@ -49,7 +50,7 @@ describe('PktSearchInput', () => {
   })
 
   it('calls onSearch prop with input value on button click', async () => {
-    const mockOnSearch = jest.fn()
+    const mockOnSearch = vi.fn()
     const { getByRole, getByPlaceholderText } = render(<Wrapper onChange={mockOnSearch} />)
     await window.customElements.whenDefined('pkt-icon')
 
@@ -70,8 +71,8 @@ describe('PktSearchInput', () => {
 
   it('renders search suggestions when suggestions prop exists', async () => {
     const suggestions = [
-      { title: 'Suggestion 1', onClick: jest.fn() },
-      { title: 'Suggestion 2', onClick: jest.fn() },
+      { title: 'Suggestion 1', onClick: vi.fn() },
+      { title: 'Suggestion 2', onClick: vi.fn() },
     ]
 
     render(<PktSearchInput id="test-search-input" suggestions={suggestions} />)
@@ -86,8 +87,8 @@ describe('PktSearchInput', () => {
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const suggestions = [
-        { title: 'Suggestion 1', onClick: jest.fn() },
-        { title: 'Suggestion 2', onClick: jest.fn() },
+        { title: 'Suggestion 1', onClick: vi.fn() },
+        { title: 'Suggestion 2', onClick: vi.fn() },
       ]
       const { container } = render(<PktSearchInput id="test-search-input" label="My label" suggestions={suggestions} />)
       await window.customElements.whenDefined('pkt-icon')

package/src/components/tabs/Tabs.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktTabItem, PktTabs } from './Tabs'
 
@@ -9,8 +10,8 @@ expect.extend(toHaveNoViolations)
 
 describe('Tabs component', () => {
   const tabs = [
-    { text: 'Tab 1', href: '#', action: jest.fn() },
-    { text: 'Tab 2', action: jest.fn() },
+    { text: 'Tab 1', href: '#', action: vi.fn() },
+    { text: 'Tab 2', action: vi.fn() },
   ]
 
   it('renders tabs with links and buttons', () => {
@@ -36,7 +37,7 @@ describe('Tabs component', () => {
   })
 
   it('calls onTabSelected prop when a tab is clicked', () => {
-    const onTabSelected = jest.fn()
+    const onTabSelected = vi.fn()
     const { getByText } = render(<PktTabs tabs={tabs} onTabSelected={onTabSelected} />)
     tabs.forEach((tab, index) => {
       const tabElement = getByText(tab.text)
@@ -47,8 +48,8 @@ describe('Tabs component', () => {
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const tabs = [
-        { text: 'Tab 1', href: '/page1', action: jest.fn() },
-        { text: 'Tab 2', action: jest.fn() },
+        { text: 'Tab 1', href: '/page1', action: vi.fn() },
+        { text: 'Tab 2', action: vi.fn() },
       ]
       const { container } = render(<PktTabs tabs={tabs} />)
       const results = await axe(container)
@@ -89,7 +90,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('calls onClick handler when tab is clicked', () => {
-    const handleClick = jest.fn()
+    const handleClick = vi.fn()
     const { getByText } = render(
       <PktTabs>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -106,7 +107,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('calls onTabSelected when tab is clicked', () => {
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -120,8 +121,8 @@ describe('PktTabItem children format', () => {
   })
 
   it('calls both onClick and onTabSelected when tab is clicked', () => {
-    const handleClick = jest.fn()
-    const handleTabSelected = jest.fn()
+    const handleClick = vi.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -268,7 +269,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('selects tab when Space key is pressed', () => {
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -283,7 +284,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('selects tab when ArrowDown key is pressed', () => {
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -357,7 +358,7 @@ describe('PktTabItem children format', () => {
 
   it('works with mapped children when explicit index is provided', () => {
     const items = ['First', 'Second', 'Third']
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
 
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>

package/src/components/tag/Tag.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom'
 import { fireEvent, render as originalRender, RenderOptions, RenderResult } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { createRef, ReactNode } from 'react'
+import { vi } from 'vitest'
 
 import { PktTag } from './Tag'
 
@@ -68,7 +69,7 @@ describe('PktTag', () => {
     })
 
     it('calls onClose when tag is clicked', async () => {
-      const onClose = jest.fn()
+      const onClose = vi.fn()
       const { getByText } = await render(
         <PktTag closeTag={true} onClose={onClose}>
           Closeable Tag