@kaizen/components 0.0.0-canary-toast-notification-fix-20240822034045 → 0.0.0-canary-workflow-export-20240910075656

package/src/ErrorPage/ErrorPage.spec.tsx

@@ -1,28 +1,28 @@
 import React from "react"
-import { screen, waitFor } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { screen, waitFor, render } from "@testing-library/react"
+import { vi } from "vitest"
 import { ErrorPage } from "./ErrorPage"
 
 describe("<ErrorPage />", () => {
   beforeAll(() => {
-    window.HTMLMediaElement.prototype.load = jest.fn()
-    window.HTMLMediaElement.prototype.play = jest
+    window.HTMLMediaElement.prototype.load = vi.fn()
+    window.HTMLMediaElement.prototype.play = vi
       .fn()
       .mockResolvedValue(undefined)
-    window.HTMLMediaElement.prototype.pause = jest.fn()
-    window.matchMedia = jest.fn().mockImplementation(() => ({
+    window.HTMLMediaElement.prototype.pause = vi.fn()
+    window.matchMedia = vi.fn().mockImplementation(() => ({
       media: "",
       onchange: null,
-      addListener: jest.fn(),
-      removeListener: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
       matches: false,
     }))
   })
 
   it("shows the correct content for error 400", async () => {
-    renderWithIntl(<ErrorPage code="400" />)
+    render(<ErrorPage code="400" />)
     await waitFor(() => {
       expect(screen.getByText("Problem loading page")).toBeVisible()
       expect(
@@ -35,7 +35,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 401", async () => {
-    renderWithIntl(<ErrorPage code="401" />)
+    render(<ErrorPage code="401" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -48,7 +48,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 403", async () => {
-    renderWithIntl(<ErrorPage code="403" />)
+    render(<ErrorPage code="403" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -61,7 +61,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 404", async () => {
-    renderWithIntl(<ErrorPage code="404" />)
+    render(<ErrorPage code="404" />)
     await waitFor(() => {
       expect(screen.getByText("Page not found")).toBeVisible()
       expect(
@@ -74,7 +74,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 422", async () => {
-    renderWithIntl(<ErrorPage code="422" />)
+    render(<ErrorPage code="422" />)
     await waitFor(() => {
       expect(screen.getByText("Change couldn't be made")).toBeVisible()
       expect(
@@ -87,7 +87,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 500", async () => {
-    renderWithIntl(<ErrorPage code="500" />)
+    render(<ErrorPage code="500" />)
     await waitFor(() => {
       expect(
         screen.getByText("Something's gone wrong on our side")
@@ -102,7 +102,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 502", async () => {
-    renderWithIntl(<ErrorPage code="502" />)
+    render(<ErrorPage code="502" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -115,7 +115,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 503", async () => {
-    renderWithIntl(<ErrorPage code="503" />)
+    render(<ErrorPage code="503" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -128,7 +128,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 504", async () => {
-    renderWithIntl(<ErrorPage code="504" />)
+    render(<ErrorPage code="504" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(

package/src/ErrorPage/ErrorPage.tsx

@@ -5,7 +5,7 @@ import { BrandMoment } from "~components/BrandMoment"
 import { ArrowRightIcon, EmailIcon } from "~components/Icon"
 import { BrandMomentError } from "~components/Illustration"
 import { Text } from "~components/Text"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ErrorStatuses, useErrorMessages } from "./hooks"
 import styles from "./ErrorPage.module.scss"
 

package/src/FieldGroup/FieldGroup.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FieldGroup.module.scss"
 
 export type FieldGroupProps = {

package/src/FieldMessage/FieldMessage.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { CautionWhiteIcon, ExclamationWhiteIcon } from "~components/Icon"
 import { Text } from "~components/Text"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FieldMessage.module.scss"
 
 export type FieldMessageStatus = "default" | "success" | "error" | "caution"

package/src/Filter/Filter/Filter.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react"
 import { FocusOn } from "react-focus-on"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { FilterPopover } from "./subcomponents/FilterPopover"
 import { FilterTriggerRef } from "./types"
 

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FilterContents.module.scss"
 
 export type FilterContentsProps = {

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes, useState } from "react"
 import { Options } from "@popperjs/core"
 import classnames from "classnames"
 import { usePopper } from "react-popper"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FilterPopover.module.scss"
 
 export type FilterPopoverProps = {

package/src/Filter/FilterBar/FilterBar.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { FilterMultiSelect } from "../index"
 import { FilterBar, FilterBarProps } from "./FilterBar"
 import { useFilterBarContext } from "./context/FilterBarContext"
@@ -148,7 +148,7 @@ const waitForI18nContent = async (): Promise<void> => {
 
 describe("<FilterBar />", () => {
   it("renders filters in the provided order", async () => {
-    const { getAllByTestId } = renderWithIntl(
+    const { getAllByTestId } = render(
       <FilterBarWrapper<ValuesSimple> filters={simpleFilters} />
     )
     await waitForI18nContent()
@@ -161,7 +161,7 @@ describe("<FilterBar />", () => {
   })
 
   it("retains Filter accessibility", async () => {
-    renderWithIntl(<FilterBarWrapper filters={simpleFilters} />)
+    render(<FilterBarWrapper filters={simpleFilters} />)
 
     const filterButton = screen.getByRole("button", { name: "Flavour" })
     await user.click(filterButton)
@@ -173,7 +173,7 @@ describe("<FilterBar />", () => {
 
   describe("Removable filters", () => {
     it("shows inactive filters in the Add Filters menu only", async () => {
-      const { getByRole, queryByText } = renderWithIntl(
+      const { getByRole, queryByText } = render(
         <FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />
       )
       await waitForI18nContent()
@@ -192,7 +192,7 @@ describe("<FilterBar />", () => {
     })
 
     it("shows removable filter as active if there is a default value", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
@@ -206,7 +206,7 @@ describe("<FilterBar />", () => {
     })
 
     it("does not show active removable filters in the Add Filters menu", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
@@ -225,7 +225,7 @@ describe("<FilterBar />", () => {
     })
 
     it("clears the value of a filter if it is removed", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
@@ -258,7 +258,7 @@ describe("<FilterBar />", () => {
     })
 
     it("adds new filters in the provided order", async () => {
-      const { getByRole, getAllByTestId } = renderWithIntl(
+      const { getByRole, getAllByTestId } = render(
         <FilterBarWrapper<ValuesSimple>
           filters={simpleFilters.map(filter => ({
             ...filter,
@@ -293,7 +293,7 @@ describe("<FilterBar />", () => {
   describe("Dependent filters", () => {
     describe("Condition not met", () => {
       it("does not show a dependent filter", async () => {
-        const { queryByRole, getByRole } = renderWithIntl(
+        const { queryByRole, getByRole } = render(
           <FilterBarWrapper filters={filtersDependent} />
         )
         await waitForI18nContent()
@@ -304,7 +304,7 @@ describe("<FilterBar />", () => {
       })
 
       it("clears the value if the filter is not usable", async () => {
-        const { getByTestId } = renderWithIntl(
+        const { getByTestId } = render(
           <FilterBarWrapper
             filters={filtersDependent}
             defaultValues={{
@@ -321,7 +321,7 @@ describe("<FilterBar />", () => {
 
     describe("Condition met", () => {
       it("shows a non-removable dependent filter in active filters", async () => {
-        const { queryByRole, getByRole, findByRole } = renderWithIntl(
+        const { queryByRole, getByRole, findByRole } = render(
           <FilterBarWrapper filters={filtersDependent} />
         )
         await waitForI18nContent()
@@ -343,7 +343,7 @@ describe("<FilterBar />", () => {
       })
 
       it("shows a removable dependent filter in Add Filters menu", async () => {
-        const { getByRole, findByRole } = renderWithIntl(
+        const { getByRole, findByRole } = render(
           <FilterBarWrapper
             filters={[
               {
@@ -400,7 +400,7 @@ describe("<FilterBar />", () => {
 
     describe("Condition result change", () => {
       it("clears the value for an unusable filter", async () => {
-        const checkValues = jest.fn<void, [Partial<ValuesDependent>]>()
+        const checkValues = vi.fn()
 
         const Wrapper = (): JSX.Element => {
           const [values, setValues] = useState<Partial<ValuesDependent>>({
@@ -421,7 +421,7 @@ describe("<FilterBar />", () => {
           )
         }
 
-        const { queryByRole, getByRole } = renderWithIntl(<Wrapper />)
+        const { queryByRole, getByRole } = render(<Wrapper />)
         await waitForI18nContent()
 
         expect(
@@ -435,7 +435,7 @@ describe("<FilterBar />", () => {
       })
 
       it("clears the value and removes a filter which loses usability", async () => {
-        const checkValues = jest.fn<void, [Partial<ValuesDependent>]>()
+        const checkValues = vi.fn()
 
         const Wrapper = (): JSX.Element => {
           const [values, setValues] = useState<Partial<ValuesDependent>>({
@@ -463,7 +463,7 @@ describe("<FilterBar />", () => {
           )
         }
 
-        const { getByRole } = renderWithIntl(<Wrapper />)
+        const { getByRole } = render(<Wrapper />)
         await waitForI18nContent()
 
         expect(
@@ -558,7 +558,7 @@ describe("<FilterBar />", () => {
           },
         ] satisfies Filters<ValuesComplexDeps>
 
-        const { queryByRole, getByRole } = renderWithIntl(
+        const { queryByRole, getByRole } = render(
           <FilterBarWrapper
             filters={filters}
             defaultValues={{ milk: "full-cream" }}
@@ -637,7 +637,7 @@ describe("<FilterBar />", () => {
 
   describe("Clear all", () => {
     it("clears all the values of all the filters", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarWrapper<ValuesSimple>
           filters={simpleFilters}
           defaultValues={{
@@ -671,7 +671,7 @@ describe("<FilterBar />", () => {
     })
 
     it("removes all removable filters", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{
@@ -740,7 +740,7 @@ describe("<FilterBar />", () => {
         )
       }
 
-      const { getByRole } = renderWithIntl(<Wrapper />)
+      const { getByRole } = render(<Wrapper />)
       await waitForI18nContent()
 
       const flavourButton = getByRole("button", { name: "Flavour" })
@@ -796,7 +796,7 @@ describe("<FilterBar />", () => {
         )
       }
 
-      const { getByRole, queryByRole } = renderWithIntl(<Wrapper />)
+      const { getByRole, queryByRole } = render(<Wrapper />)
       await waitForI18nContent()
 
       expect(queryByRole("button", { name: "Flavour" })).not.toBeInTheDocument()
@@ -861,7 +861,7 @@ describe("<FilterBar />", () => {
         )
       }
 
-      const fetchCityOptions = jest.fn((filterValues: Partial<AsyncValues>) => {
+      const fetchCityOptions = vi.fn((filterValues: Partial<AsyncValues>) => {
         const isSupermanInFilterValue = filterValues.hero?.includes("superman")
         const isBatmanInFilterValue = filterValues.hero?.includes("batman")
 
@@ -875,7 +875,7 @@ describe("<FilterBar />", () => {
         ])
       })
 
-      const fetchHeroOptions = jest.fn((filterValues: Partial<AsyncValues>) => {
+      const fetchHeroOptions = vi.fn((filterValues: Partial<AsyncValues>) => {
         const isGothamInFilterValue = filterValues.city?.includes("gotham")
         const isMetroInFilterValue = filterValues.city?.includes("metro")
 
@@ -907,7 +907,7 @@ describe("<FilterBar />", () => {
       ] satisfies Filters<AsyncValues>
 
       it("can re-fetch options with all active filter values pulled off of the FilterBarContext", async () => {
-        const { getByRole, queryByRole } = renderWithIntl(
+        const { getByRole, queryByRole } = render(
           <FilterBarWrapper<AsyncValues> filters={config} defaultValues={{}} />
         )
 
@@ -981,7 +981,7 @@ describe("<FilterBar />", () => {
       ] satisfies Filters<CycleFilterValues>
 
       it("opens the Custom Date filter when Cycle's 'custom' value is selected", async () => {
-        const { getByRole } = renderWithIntl(
+        const { getByRole } = render(
           <FilterBarWrapper<CycleFilterValues> filters={cycleFilters} />
         )
         await waitForI18nContent()

package/src/Filter/FilterBar/FilterBar.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   FilterBarProvider,
   FilterBarProviderProps,

package/src/Filter/FilterBar/context/utils/updateDependentFilters.spec.ts

@@ -1,9 +1,7 @@
+import { vi } from "vitest"
 import { FilterBarState } from "../types"
 import { updateDependentFilters } from "./updateDependentFilters"
-
-const sugarLevelIsUsableWhen = jest.fn(
-  state => state.flavour.value !== undefined
-)
+const sugarLevelIsUsableWhen = vi.fn(state => state.flavour.value !== undefined)
 
 type Values = {
   flavour: string

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx

@@ -1,7 +1,6 @@
 import React from "react"
-import { waitFor, screen } from "@testing-library/react"
+import { waitFor, screen, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
 import {
   FilterBarProvider,
   FilterBarProviderProps,
@@ -53,7 +52,7 @@ describe("<AddFiltersMenu />", () => {
       },
     ] satisfies Filters<Values>
 
-    renderWithIntl(<AddFiltersMenuWrapper filters={filters} />)
+    render(<AddFiltersMenuWrapper filters={filters} />)
 
     await waitFor(() => {
       expect(screen.getByRole("button", { name: "Add Filters" })).toBeVisible()
@@ -80,7 +79,7 @@ describe("<AddFiltersMenu />", () => {
       },
     ] satisfies Filters<Values>
 
-    renderWithIntl(<AddFiltersMenuWrapper filters={filters} />)
+    render(<AddFiltersMenuWrapper filters={filters} />)
 
     await waitFor(() => {
       const addFiltersButton = screen.getByRole("button", {

package/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.spec.tsx

@@ -1,7 +1,6 @@
 import React from "react"
-import { screen, waitFor } from "@testing-library/react"
+import { screen, waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
 import { FilterBarProvider } from "../../context/FilterBarContext"
 import { FilterBarButton, FilterBarButtonProps } from "./FilterBarButton"
 
@@ -43,9 +42,7 @@ const FilterBarButtonWrapper = (
 
 describe("<FilterBarButton />", () => {
   it("does not show a remove button when it is not removable", async () => {
-    const { getByRole, queryByRole } = renderWithIntl(
-      <FilterBarButtonWrapper />
-    )
+    const { getByRole, queryByRole } = render(<FilterBarButtonWrapper />)
     await waitFor(() => {
       expect(getByRole("button", { name: "Coffee" })).toBeVisible()
     })
@@ -55,7 +52,7 @@ describe("<FilterBarButton />", () => {
   })
 
   it("shows a remove button when it is removable", async () => {
-    renderWithIntl(<FilterBarButtonWrapper isRemovable />)
+    render(<FilterBarButtonWrapper isRemovable />)
     const filterButton = await screen.findByRole("button", { name: "Coffee" })
     await waitFor(() => {
       expect(filterButton).toBeVisible()

package/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -58,7 +58,7 @@ const FilterBarDatePickerWrapper = ({
 
 describe("<FilterBarDatePicker />", () => {
   it("shows the name in the trigger button", async () => {
-    renderWithIntl(<FilterBarDatePickerWrapper />)
+    render(<FilterBarDatePickerWrapper />)
     await waitFor(() => {
       const triggerButton = screen.getByRole("button", { name: "Drank" })
       expect(triggerButton).toBeInTheDocument()
@@ -67,7 +67,7 @@ describe("<FilterBarDatePicker />", () => {
 
   describe("Removable", () => {
     it("does not show the remove button when isRemovable is false", async () => {
-      renderWithIntl(<FilterBarDatePickerWrapper />)
+      render(<FilterBarDatePickerWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("button", { name: "Drank" })
@@ -79,7 +79,7 @@ describe("<FilterBarDatePicker />", () => {
     })
 
     it("shows the remove button when isRemovable is true", async () => {
-      renderWithIntl(
+      render(
         <FilterBarDatePickerWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ drank: new Date("2023-05-01") }}
@@ -94,9 +94,7 @@ describe("<FilterBarDatePicker />", () => {
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = renderWithIntl(
-      <FilterBarDatePickerWrapper />
-    )
+    const { getByRole, queryByRole } = render(<FilterBarDatePickerWrapper />)
     const triggerButton = getByRole("button", { name: "Drank" })
 
     await user.click(triggerButton)
@@ -113,7 +111,7 @@ describe("<FilterBarDatePicker />", () => {
   })
 
   it("shows a selected value when provided", async () => {
-    const { getByRole } = renderWithIntl(
+    const { getByRole } = render(
       <FilterBarDatePickerWrapper
         defaultValues={{ drank: new Date("2023-06-06") }}
       />
@@ -127,7 +125,7 @@ describe("<FilterBarDatePicker />", () => {
   })
 
   it("updates the selected value in the trigger button when selecting a date", async () => {
-    renderWithIntl(
+    render(
       <FilterBarDatePickerWrapper
         defaultValues={{ drank: new Date("2023-06-06") }}
       />
@@ -156,8 +154,8 @@ describe("<FilterBarDatePicker />", () => {
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn()
-    renderWithIntl(<FilterBarDatePickerWrapper onDateChange={onChange} />)
+    const onChange = vi.fn()
+    render(<FilterBarDatePickerWrapper onDateChange={onChange} />)
 
     const triggerButton = screen.getByRole("button", { name: "Drank" })
     await user.click(triggerButton)

package/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -53,7 +52,7 @@ const FilterBarDateRangePickerWrapper = ({
 
 describe("<FilterBarDateRangePicker />", () => {
   it("shows the name in the trigger button", async () => {
-    renderWithIntl(<FilterBarDateRangePickerWrapper />)
+    render(<FilterBarDateRangePickerWrapper />)
     await waitFor(() => {
       const triggerButton = screen.getByRole("button", { name: "Dates" })
       expect(triggerButton).toBeInTheDocument()
@@ -62,7 +61,7 @@ describe("<FilterBarDateRangePicker />", () => {
 
   describe("Removable", () => {
     it("does not show the remove button when isRemovable is false", async () => {
-      renderWithIntl(<FilterBarDateRangePickerWrapper />)
+      render(<FilterBarDateRangePickerWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("button", { name: "Dates" })
@@ -74,7 +73,7 @@ describe("<FilterBarDateRangePicker />", () => {
     })
 
     it("shows the remove button when isRemovable is true", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarDateRangePickerWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ range: { from: new Date("2023-05-01") } }}
@@ -89,7 +88,7 @@ describe("<FilterBarDateRangePicker />", () => {
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = renderWithIntl(
+    const { getByRole, queryByRole } = render(
       <FilterBarDateRangePickerWrapper />
     )
     const triggerButton = getByRole("button", { name: "Dates" })
@@ -108,7 +107,7 @@ describe("<FilterBarDateRangePicker />", () => {
   })
 
   it("shows a selected value when provided", async () => {
-    const { getByRole } = renderWithIntl(
+    const { getByRole } = render(
       <FilterBarDateRangePickerWrapper
         defaultValues={{
           range: {
@@ -127,7 +126,7 @@ describe("<FilterBarDateRangePicker />", () => {
   })
 
   it("updates the selected value in the trigger button", async () => {
-    const { getByRole, getByText } = renderWithIntl(
+    const { getByRole, getByText } = render(
       <FilterBarDateRangePickerWrapper
         defaultValues={{
           range: {
@@ -159,8 +158,8 @@ describe("<FilterBarDateRangePicker />", () => {
   }, 10000)
 
   it("allows calling additional functions on value change", async () => {
-    const onChange = jest.fn<void, [DateRange | undefined]>()
-    const { getByRole, getByText } = renderWithIntl(
+    const onChange = vi.fn()
+    const { getByRole, getByText } = render(
       <FilterBarDateRangePickerWrapper
         defaultValues={{
           range: {