[Help]: How to test a component that uses embla-carousel with React Testing component and Vitest?

[alamenai]

Summary

I have this test suite:

import { render, screen, fireEvent } from '@testing-library/react';
import { useRouter } from 'next/router';
import { describe, expect, test, vi } from 'vitest';
import { ElectricityDemandForm } from '../components/form';
import { renderWithProviders } from '@/utils/test-utils';


describe('ElectricityDemandForm', () => {
  test('renders correctly', () => {
    renderWithProviders(<ElectricityDemandForm data={{ electricityDemandAnnual: 4000, slp: 'H0' }} />);
    expect(screen.getByText('Strombedarf')).toBeInTheDocument();
  });
});

The <ElectricityDemandForm ..> component uses embla-carousel from Shadcn, howeve the test failed and it shows:

My __mocks___/embla-carousel-react.ts:

const useEmblaCarousel = () => [null, null]

export default useEmblaCarousel

My setupTests.ts:

import "@testing-library/jest-dom"
import * as matchers from "@testing-library/jest-dom/matchers"
import { cleanup } from "@testing-library/react"
import { afterEach, expect, vi } from "vitest"

expect.extend(matchers)

afterEach(() => {
  cleanup()
})

// Mock the ResizeObserver
const ResizeObserverMock = vi.fn(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn(),
}))

// Stub the global ResizeObserver
vi.stubGlobal("ResizeObserver", ResizeObserverMock)

// Mock next/router
vi.mock("next/navigation", () => ({
  useRouter() {
    return {
      prefetch: () => null,
    }
  },
}))

// Mock embla-carousel-react
vi.mock("embla-carousel-react", () => ({
  useEmblaCarousel: () => [null, null],
}))

My vitest.config.ts:

import react from "@vitejs/plugin-react"
import { resolve } from "path"
import { defineConfig } from "vitest/config"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },

  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./setupTests.ts",

    exclude: ["**/node_modules/**", "**/dist/**", "**/e2e/**"],
  },
})

My ElectricityDemandForm component:

"use client"

import { cn } from "@/lib/utils"
import { zodResolver } from "@hookform/resolvers/zod"
import { Divider } from "@tremor/react"
import { cx } from "class-variance-authority"
import {
  LayoutDashboard,
  Loader2,
  MousePointerSquare,
  MoveRight,
  PencilLine,
  Search,
  UserRound,
  UsersRound,
} from "lucide-react"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { useDispatch } from "react-redux"
import { z } from "zod"

import { InfoDialog } from "@/components/core/info-dialog"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Slider } from "@/components/ui/slider"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

import { resetFinancialInsightsData } from "../../financial-analytics/state/slice"
import {
  resetBattery,
  resetCustomImage,
  resetFlatRoofOrientation,
  resetPanelMeasures,
  resetPanelPlacement,
  resetPitchedRoofOrientation,
  resetSelectRoofs,
} from "../../panel-installation/cutsom/state/slice"
import { resetDefaultImage } from "../../panel-installation/default/state/slice"
import { ELECTRICITY_DEMAND_DESCRIPTION, STANDARD_LOAD_PROFILE_DESCRIPTION } from "../info"
import { standardLoadProfilesOptions } from "../options"
import { createElectricityDemandSchema } from "../zod/schema"

type Props = {
  data: { electricityDemandAnnual: number; slp: string }
}

type InstallationMethod = {
  method: "Standard" | "Individuell"
  description: string
}

type FormData = z.infer<ReturnType<typeof createElectricityDemandSchema>>

const installationMethods: InstallationMethod[] = [
  { method: "Standard", description: "Analyse ohne Vorkenntnisse." },
  { method: "Individuell", description: "Personalisieren Sie Ihre Modulinstallation nach Ihren Wünschen." },
]

export const ELECTRICITY_CONSUMPTION_RATE = 4

const DEFAULT_NOMINAL_PANEL_POWER = 400

export const ElectricityDemandForm = ({ data }: Props) => {
  const dispatch = useDispatch()

  const router = useRouter()

  const { electricityDemandAnnual, slp } = data

  const maxElectricityConsumption = electricityDemandAnnual * ELECTRICITY_CONSUMPTION_RATE

  const minElectricityConsumption = electricityDemandAnnual / ELECTRICITY_CONSUMPTION_RATE

  const schema = createElectricityDemandSchema(maxElectricityConsumption, minElectricityConsumption)

  const [isPending, setIsPending] = useState<boolean>(false)

  const [standardLoadProfile, setStandardLoadProfile] = useState(slp)

  const [isElectrictyDemandEditable, setIsElectrictyDemandEditable] = useState(false)

  const [panelInstallationMethod, setPanelInstallationMethod] = useState<InstallationMethod["method"]>("Standard")

  const [selectedCarouselIndex, setSelectedCarouselIndex] = useState<number | null>(null)

  const form = useForm<FormData>({
    mode: "onChange",
    resolver: zodResolver(schema),
    defaultValues: { electricityAnnualConsumption: electricityDemandAnnual.toString() },
  })

  const onSubmit = (formData: FormData) => {
    const { electricityAnnualConsumption } = formData

    setIsPending(true)

    const selectedTab = panelInstallationMethod === "Standard" ? "default" : "custom"

    dispatch(resetSelectRoofs())
    dispatch(resetPanelMeasures())
    dispatch(resetPitchedRoofOrientation())
    dispatch(resetFlatRoofOrientation())
    dispatch(resetBattery())
    dispatch(resetCustomImage())
    dispatch(resetDefaultImage())
    dispatch(resetPanelPlacement())
    dispatch(resetFinancialInsightsData())

    router.push(
      `panel-installation?tab=${selectedTab}&electricity=${electricityAnnualConsumption}&slp=${standardLoadProfile}&wp=${DEFAULT_NOMINAL_PANEL_POWER}`
    )

    setIsPending(false)
  }

  const onSelectInstallationMethod = (method: InstallationMethod["method"]) => {
    setPanelInstallationMethod(method)
  }

  const handleCarouselItemClick = (index: number) => {
    setSelectedCarouselIndex(index === selectedCarouselIndex ? null : index)
    const newValue = (index + 1) * 2500
    form.setValue("electricityAnnualConsumption", newValue.toString())
    setIsElectrictyDemandEditable(false)
  }

  const isElectricityConsumptionValid = (value: number) =>
    value && value >= minElectricityConsumption && value <= maxElectricityConsumption

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} autoComplete='off'>
        <Card className='rounded-3xl w-[600px] p-4'>
          <CardHeader>
            <CardTitle>Strombedarf</CardTitle>
            <CardDescription>
              Passen Sie Ihren Strombedarf individuell an und wählen Sie Ihre Analysetiefe.
            </CardDescription>
          </CardHeader>
          <CardContent className='flex flex-col mt-6'>
            <div className='flex flex-col gap-4'>
              <div className='flex items-center justify-between'>
                <FormLabel htmlFor='electricity-annual-consumption'>Mein jährlicher Stromverbrauch</FormLabel>
                <InfoDialog title='Strombedarf'>
                  <p className='text-sm leading-7'>{ELECTRICITY_DEMAND_DESCRIPTION.intro}</p>
                  <Accordion type='single' collapsible>
                    <AccordionItem value='item-1' className='border-none bg-slate-100 px-4 rounded-xl text-[15px]'>
                      <AccordionTrigger className='border-none'>Erfahren Sie mehr</AccordionTrigger>
                      <AccordionContent className='leading-7 '>
                        {ELECTRICITY_DEMAND_DESCRIPTION.description}
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </InfoDialog>
              </div>
            </div>
            <Card className='mt-3 rounded-xl p-8'>
              <CardContent className='p-0 pb-2'>
                {isElectrictyDemandEditable ? (
                  <FormField
                    control={form.control}
                    name='electricityAnnualConsumption'
                    render={({ field }) => {
                      const { value } = field

                      return (
                        <FormItem className='w-full items-baseline'>
                          <FormControl>
                            <div>
                              <Label htmlFor='electricity-annual-consumption'>
                                Geben Sie Ihren jährlichen Stromverbrauch ein
                              </Label>

                              <div className='relative w-full items-center'>
                                <Input
                                  id='electricity-annual-consumption'
                                  className='h-11 text-base mt-2 pr-12'
                                  placeholder='Geben Sie Ihren Strombedarf ein'
                                  {...field}
                                  onChange={(event) => {
                                    const { value } = event.target
                                    if (/^\d*$/.test(value)) {
                                      field.onChange(value)
                                    }
                                  }}
                                />
                                <p className='absolute right-0 top-0 mt-3 mr-6 h-4 w-4 text-muted-foreground text-sm'>
                                  kWh
                                </p>
                              </div>
                            </div>
                          </FormControl>
                          <FormMessage />
                          <Button
                            type='submit'
                            disabled={!isElectricityConsumptionValid(parseInt(value, 10))}
                            variant='secondary'
                            className='text-blue-500 hover:text-blue-600 w-full'
                            onClick={(e) => {
                              e.preventDefault()
                              setIsElectrictyDemandEditable(false)
                              setSelectedCarouselIndex(null)
                            }}
                          >
                            Speichern
                          </Button>
                        </FormItem>
                      )
                    }}
                  />
                ) : (
                  <div className='flex flex-col'>
                    <div className='flex justify-between items-baseline'>
                      <div className=' flex text-3xl space-x-3 font-semibold w-full items-center'>
                        <span className='items-baseline'>
                          {form.watch("electricityAnnualConsumption")}
                          <span className='text-sm ml-1'>kWh</span>
                        </span>

                        {selectedCarouselIndex !== null && (
                          <div className='flex relative h-8 space-x-3'>
                            <Separator orientation='vertical' />
                            <HoverCard>
                              <HoverCardTrigger>
                                <Badge className='bg-blue-600 text-white text-sm gap-1 cursor-pointer hover:bg-blue-600'>
                                  <UserRound size={18} />
                                  {selectedCarouselIndex + 1}
                                </Badge>
                              </HoverCardTrigger>
                              <HoverCardContent className='space-y-3'>
                                <p className='text-sm'>
                                  {selectedCarouselIndex + 1} person{selectedCarouselIndex + 1 > 1 && "s"} ={" "}
                                  {form.watch("electricityAnnualConsumption")} kWh
                                </p>
                                <Separator />
                                <CardDescription className='font-normal leading-6'>
                                  Der durchschnittliche Stromverbrauch einer Person beträgt jährlich 2500 kWh. Das hier
                                  angezeigte Ergebnis ergibt sich aus der Multiplikation der Personenzahl mit 2500 kWh.
                                </CardDescription>
                              </HoverCardContent>
                            </HoverCard>
                          </div>
                        )}
                      </div>
                      <Button
                        variant='secondary'
                        className='text-sm text-blue-500 font-medium hover:cursor-pointer hover:text-blue-600 rounded-full'
                        onClick={() => setIsElectrictyDemandEditable(true)}
                      >
                        <PencilLine size={20} className='mr-2' />
                        Editieren
                      </Button>
                    </div>
                    <FormField
                      control={form.control}
                      name='electricityAnnualConsumption'
                      render={({ field }) => (
                        <FormItem className='w-full items-baseline mt-8'>
                          <FormControl>
                            <div className='flex flex-col'>
                              <Slider
                                min={minElectricityConsumption}
                                max={
                                  electricityDemandAnnual > maxElectricityConsumption
                                    ? electricityDemandAnnual
                                    : maxElectricityConsumption
                                }
                                step={100}
                                className='[&>span]:h-2 [&>span]:items-center [&>span]:flex [&>span]:cursor-pointer'
                                value={[parseInt(field.value, 10)]}
                                onValueChange={(value) => {
                                  field.onChange(value[0].toString())
                                  setSelectedCarouselIndex(null)
                                }}
                              />
                              <ToggleGroup
                                type='single'
                                className='flex justify-between mt-2'
                                value={form.watch("electricityAnnualConsumption")}
                                onValueChange={(value) => {
                                  form.setValue("electricityAnnualConsumption", value)
                                  setSelectedCarouselIndex(null)
                                }}
                              >
                                <ToggleGroupItem value={minElectricityConsumption.toString()} aria-label='Toggle bold'>
                                  <CardDescription>{minElectricityConsumption}</CardDescription>
                                </ToggleGroupItem>
                                <ToggleGroupItem
                                  value={(maxElectricityConsumption / 2).toString()}
                                  aria-label='Toggle bold'
                                >
                                  <CardDescription>{maxElectricityConsumption / 2}</CardDescription>
                                </ToggleGroupItem>
                                <ToggleGroupItem value={maxElectricityConsumption.toString()} aria-label='Toggle bold'>
                                  <CardDescription>{maxElectricityConsumption}</CardDescription>
                                </ToggleGroupItem>
                              </ToggleGroup>
                            </div>
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <Divider className='my-8'>Oder durch Haushaltsmitglieder</Divider>
                    <FormField
                      control={form.control}
                      name='electricityAnnualConsumption'
                      render={() => {
                        return (
                          <FormItem>
                            <FormControl>
                              <div className='flex flex-col justify-center w-full items-center'>
                                <Carousel
                                  opts={{
                                    align: "start",
                                  }}
                                  className='w-full max-w-sm'
                                  onClick={(e) => {
                                    e.preventDefault()
                                  }}
                                >
                                  <CarouselContent>
                                    {Array.from({ length: 10 }).map((_, index) => (
                                      <CarouselItem
                                        key={index}
                                        className={cn(
                                          "md:basis-1/2 lg:basis-1/3 cursor-pointer",
                                          (index + 1) * 2500 > maxElectricityConsumption &&
                                          "opacity-40 pointer-events-none"
                                        )}
                                        onClick={(e) => handleCarouselItemClick(index)}
                                      >
                                        <div className='p-1'>
                                          <Card
                                            className={cn(
                                              index === selectedCarouselIndex &&
                                              "bg-blue-50 text-blue-600 border-blue-600 aspect-square"
                                            )}
                                          >
                                            <CardContent
                                              className={"flex relative aspect-square items-center justify-center p-6"}
                                            >
                                              {index + 1 >= 2 ? (
                                                <UsersRound size={18} className='absolute top-2 left-2' />
                                              ) : (
                                                <UserRound size={18} className='absolute top-2 left-2' />
                                              )}
                                              <span className='text-3xl font-semibold'>{index + 1}</span>
                                              <CardDescription
                                                className={cn(
                                                  "absolute bottom-2 left-2 text-xs",
                                                  index === selectedCarouselIndex && "text-blue-600"
                                                )}
                                              >
                                                {(index + 1) * 2500} kWh
                                              </CardDescription>
                                            </CardContent>
                                          </Card>
                                        </div>
                                      </CarouselItem>
                                    ))}
                                  </CarouselContent>
                                  <CarouselPrevious />
                                  <CarouselNext />
                                </Carousel>
                              </div>
                            </FormControl>
                          </FormItem>
                        )
                      }}
                    />
                  </div>
                )}
              </CardContent>
            </Card>
            <div className='flex flex-col space-y-3 mt-6'>
              <div className='flex items-center justify-between'>
                <Label htmlFor='load-porfile'>Mein Lastprofil</Label>
                <InfoDialog title='Lastprofil'>
                  <p className='text-sm leading-7'>{STANDARD_LOAD_PROFILE_DESCRIPTION.intro}</p>
                  <Accordion type='single' collapsible>
                    <AccordionItem value='item-1' className='border-none bg-slate-100 px-4 rounded-xl text-[15px]'>
                      <AccordionTrigger className='border-none'>Erfahren Sie mehr</AccordionTrigger>
                      <AccordionContent className='leading-7 '>
                        {STANDARD_LOAD_PROFILE_DESCRIPTION.description}
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </InfoDialog>
              </div>
              <Select defaultValue={standardLoadProfile} onValueChange={(value) => setStandardLoadProfile(value)}>
                <SelectTrigger id='load-profile' className='h-11 relative'>
                  <SelectValue placeholder='Select' />
                </SelectTrigger>
                <SelectContent className='rounded-2xl relative'>
                  {standardLoadProfilesOptions.map(({ option, profile }) => {
                    return (
                      <SelectItem
                        key={option}
                        value={profile}
                        className={cx("h-11", profile === standardLoadProfile && "font-semibold text-2x")}
                      >
                        <div className='w-full justify-between'>
                          {option}
                          <Badge
                            variant='outline'
                            className={cx(
                              "absolute right-10",
                              profile === standardLoadProfile && "bg-blue-600 text-white"
                            )}
                          >
                            {profile}
                          </Badge>
                        </div>
                      </SelectItem>
                    )
                  })}
                </SelectContent>
              </Select>
            </div>
            <div className='flex flex-col space-y-4 mt-6'>
              <Label htmlFor='load-porfile'>Wählen Sie Ihre Belegungsart</Label>
              <div className='flex justify-between mt-5 gap-4 mb-4'>
                {installationMethods.map((installation) => (
                  <Card
                    key={installation.method}
                    className={cx(
                      "relative w-full min-h-[100px] cursor-pointer shadow-none p-4 rounded-xl",
                      installation.method === panelInstallationMethod
                        ? " bg-blue-50  text-blue-600 border-blue-600"
                        : "hover:bg-slate-50"
                    )}
                    onClick={() => onSelectInstallationMethod(installation.method)}
                  >
                    {installation.method === "Standard" ? (
                      <LayoutDashboard size={28} />
                    ) : (
                      <MousePointerSquare size={28} />
                    )}
                    <CardTitle className='xs:text-[15px] xl:text-lg font-semibold mt-2'>
                      {installation.method}
                    </CardTitle>
                    <CardDescription
                      className={cx(
                        " mt-4 leading-relaxed",
                        panelInstallationMethod === installation.method ? "text-blue-600" : ""
                      )}
                    >
                      {installation.description}
                    </CardDescription>
                    {panelInstallationMethod === installation.method ? (
                      <span className='flex h-4 w-4 mr-2 absolute right-0 top-2'>
                        <span className='animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75'></span>
                        <span className='relative inline-flex rounded-full h-4 w-4 bg-blue-500'></span>
                      </span>
                    ) : null}
                  </Card>
                ))}
              </div>
              <div className='flex flex-col bg-blue-50 p-4 rounded-lg text-blue-600 justify-start items-start'>
                <div>
                  <h3 className='font-semibold text-lg'>{panelInstallationMethod}</h3>
                </div>

                {panelInstallationMethod === "Standard" ? (
                  <p className='text-[15px] leading-relaxed mt-2'>
                    {panelInstallationMethod === "Standard"}
                    Wenn Sie sich für die Standardmethode entscheiden, werden alle Ihre Dächer mit Modulen bedeckt. Wenn
                    Sie die Installation der Solarmodule auf Ihren Dächern von Anfang an individuell gestalten möchten,
                    wählen Sie die maßgeschneiderte Installation.
                  </p>
                ) : (
                  <p className='text-[15px] leading-relaxed mt-2'>
                    Wenn Sie sich für die Standardmethode entscheiden, werden alle Ihre Dächer mit Solarmodulen bedeckt.
                    Wenn Sie jedoch die Installation der Solarmodule von Anfang an individuell gestalten möchten, wählen
                    Sie die maßgeschneiderte Installation..
                  </p>
                )}
              </div>
            </div>
          </CardContent>
          <CardFooter className='flex flex-col mt-8'>
            <Button
              type='submit'
              className='relative w-full h-12 my-2 bg-blue-900 hover:bg-blue-800'
              disabled={!isElectricityConsumptionValid(parseInt(form.getValues().electricityAnnualConsumption, 10))}
            >
              {isPending ? (
                <Loader2 className='h-6 w-6 animate-spin' />
              ) : (
                <span className='flex items-center'>
                  Zum Ergebnis
                  <MoveRight className='absolute right-4' />
                </span>
              )}
            </Button>
            {isPending ? (
              <p className='text-xs text-slate-500'>Bitte warten Sie, wir installieren Ihre Module ...</p>
            ) : null}
          </CardFooter>
        </Card>
      </form>
    </Form>
  )
}

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[BaicanIulia]

Hi,
instead of this:

// Mock embla-carousel-react
vi.mock("embla-carousel-react", () => ({
 useEmblaCarousel: () => [null, null],
}))

try this:

vi.mock("embla-carousel-react", () => ({
  default: useEmblaCarousel,
}));

where useEmblaCarousel is imported from __mocks___/embla-carousel-react.ts

[alamenai]

Thank you @BaicanIulia , I'll try it and let you know.