@kaizen/components 1.61.0 → 1.61.2

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/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: {

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } 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 { vi } from "vitest"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -91,7 +91,7 @@ const FilterBarMultiSelectWrapper = <ValuesMap extends FiltersValues = Values>({
 
 describe("<FilterBarMultiSelect />", () => {
   it("shows the name in the trigger button", async () => {
-    const { getByRole } = renderWithIntl(<FilterBarMultiSelectWrapper />)
+    const { getByRole } = render(<FilterBarMultiSelectWrapper />)
     await waitFor(() => {
       const triggerButton = getByRole("button", { name: "Toppings" })
       expect(triggerButton).toBeVisible()
@@ -100,7 +100,7 @@ describe("<FilterBarMultiSelect />", () => {
 
   describe("Removable", () => {
     it("does not show the remove button when isRemovable is false", async () => {
-      const { queryByRole } = renderWithIntl(<FilterBarMultiSelectWrapper />)
+      const { queryByRole } = render(<FilterBarMultiSelectWrapper />)
       await waitFor(() => {
         expect(screen.getByRole("button", { name: "Toppings" })).toBeVisible()
       })
@@ -110,7 +110,7 @@ describe("<FilterBarMultiSelect />", () => {
     })
 
     it("shows the remove button when isRemovable is true", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarMultiSelectWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ toppings: ["pearls"] }}
@@ -124,7 +124,7 @@ describe("<FilterBarMultiSelect />", () => {
     })
 
     it("hides the filter when remove button is clicked", async () => {
-      const { getByRole } = renderWithIntl(
+      const { getByRole } = render(
         <FilterBarMultiSelectWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ toppings: ["pearls"] }}
@@ -149,9 +149,7 @@ describe("<FilterBarMultiSelect />", () => {
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = renderWithIntl(
-      <FilterBarMultiSelectWrapper />
-    )
+    const { getByRole, queryByRole } = render(<FilterBarMultiSelectWrapper />)
     const triggerButton = getByRole("button", { name: "Toppings" })
 
     await user.click(triggerButton)
@@ -168,7 +166,7 @@ describe("<FilterBarMultiSelect />", () => {
   })
 
   it("shows a selected value when provided", async () => {
-    const { getByRole } = renderWithIntl(
+    const { getByRole } = render(
       <FilterBarMultiSelectWrapper
         defaultValues={{ toppings: ["pearls", "fruit-jelly"] }}
       />
@@ -182,7 +180,7 @@ describe("<FilterBarMultiSelect />", () => {
   })
 
   it("updates the selected value in the trigger button", async () => {
-    const { getByRole } = renderWithIntl(
+    const { getByRole } = render(
       <FilterBarMultiSelectWrapper defaultValues={{ toppings: ["pearls"] }} />
     )
     const triggerButton = getByRole("button", {
@@ -204,8 +202,8 @@ describe("<FilterBarMultiSelect />", () => {
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn()
-    const { getByRole } = renderWithIntl(
+    const onChange = vi.fn()
+    const { getByRole } = render(
       <FilterBarMultiSelectWrapper onSelectionChange={onChange} />
     )
     const triggerButton = getByRole("button", { name: "Toppings" })
@@ -257,7 +255,7 @@ describe("<FilterBarMultiSelect />", () => {
       )
     }
 
-    const { getByRole, getAllByRole, getByTestId } = renderWithIntl(
+    const { getByRole, getAllByRole, getByTestId } = render(
       <FilterBarMultiSelectWrapper<ValuesDependent>
         additionalFilters={[
           {

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } 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 { vi } from "vitest"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -67,7 +67,7 @@ const FilterBarSelectWrapper = <ValuesMap extends FiltersValues = Values>({
 
 describe("<FilterBarSelect />", () => {
   it("shows the name in the trigger button", async () => {
-    renderWithIntl(<FilterBarSelectWrapper />)
+    render(<FilterBarSelectWrapper />)
     await waitFor(() => {
       const triggerButton = screen.getByRole("button", { name: "Flavour" })
       expect(triggerButton).toBeInTheDocument()
@@ -76,7 +76,7 @@ describe("<FilterBarSelect />", () => {
 
   describe("Removable", () => {
     it("does not show the remove button when isRemovable is false", async () => {
-      renderWithIntl(<FilterBarSelectWrapper />)
+      render(<FilterBarSelectWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("button", { name: "Flavour" })
@@ -88,7 +88,7 @@ describe("<FilterBarSelect />", () => {
     })
 
     it("shows the remove button when isRemovable is true", async () => {
-      renderWithIntl(
+      render(
         <FilterBarSelectWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ flavour: "jasmine-milk-tea" }}
@@ -103,9 +103,7 @@ describe("<FilterBarSelect />", () => {
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = renderWithIntl(
-      <FilterBarSelectWrapper />
-    )
+    const { getByRole, queryByRole } = render(<FilterBarSelectWrapper />)
     const triggerButton = getByRole("button", { name: "Flavour" })
 
     await user.click(triggerButton)
@@ -122,7 +120,7 @@ describe("<FilterBarSelect />", () => {
   })
 
   it("shows a selected value when provided", async () => {
-    const { getByRole } = renderWithIntl(
+    const { getByRole } = render(
       <FilterBarSelectWrapper defaultValues={{ flavour: "jasmine-milk-tea" }} />
     )
     await waitFor(() => {
@@ -134,7 +132,7 @@ describe("<FilterBarSelect />", () => {
   })
 
   it("updates the selected value in the trigger button", async () => {
-    const { getByRole } = renderWithIntl(
+    const { getByRole } = render(
       <FilterBarSelectWrapper defaultValues={{ flavour: "jasmine-milk-tea" }} />
     )
     const triggerButton = getByRole("button", {
@@ -156,8 +154,8 @@ describe("<FilterBarSelect />", () => {
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn()
-    const { getByRole } = renderWithIntl(
+    const onChange = vi.fn()
+    const { getByRole } = render(
       <FilterBarSelectWrapper onSelectionChange={onChange} />
     )
     const triggerButton = getByRole("button", { name: "Flavour" })
@@ -208,7 +206,7 @@ describe("<FilterBarSelect />", () => {
       return <FilterBarSelect id="topping" items={items} />
     }
 
-    const { getByRole, getAllByRole, getByTestId } = renderWithIntl(
+    const { getByRole, getAllByRole, getByTestId } = render(
       <FilterBarSelectWrapper<ValuesDependent>
         additionalFilters={[
           {

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } 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 { vi } from "vitest"
 import {
   FilterButtonRemovable,
   FilterButtonRemovableProps,
@@ -29,7 +29,7 @@ const FilterButtonRemovableWrapper = ({
 
 describe("<FilterButtonRemovable />", () => {
   it("should use fallback label for remove button if not specified", async () => {
-    renderWithIntl(<FilterButtonRemovableWrapper />)
+    render(<FilterButtonRemovableWrapper />)
     await waitFor(() => {
       expect(
         screen.getByRole("button", { name: "Remove filter - Desserts" })
@@ -39,7 +39,7 @@ describe("<FilterButtonRemovable />", () => {
 
   describe("Refs", () => {
     it("correctly passes through both button refs", async () => {
-      const onClick = jest.fn()
+      const onClick = vi.fn()
 
       const Wrapper = (): JSX.Element => {
         const triggerRef = useRef<HTMLButtonElement>(null)
@@ -72,7 +72,7 @@ describe("<FilterButtonRemovable />", () => {
         )
       }
 
-      renderWithIntl(<Wrapper />)
+      render(<Wrapper />)
 
       await user.click(screen.getByText("Click me"))
       expect(onClick).toHaveBeenCalledWith(