Best way to test a component using Embla for React and testing framework such as Jest?

[hanshank]

Hey! I've recently been using Embla as the backbone for a Carousel component, and now it's time to add some tests. My company uses Jest and react-testing-library if that helps. Curious if anyone else has had any luck writing tests for carousels built with Embla, and what was your approach? I'll probably end up doing some mocking.

[davidjerleke]

@remy90 you might have some useful tips to share on this topic?

[hanshank]

Open to any input, but so far I'm experimenting with simply mocking the returned functions from useEmblaCarousel and manipulating the return value of those functions in order to test if my code is prepared for various scenarios. In the testing framwork Jest that looks something like:

const useEmblaCarousel = jest.spyOn(emblaCarouselReact, 'default');
const emblaApi: emblaCarouselReact.UseEmblaCarouselType[1] = {
  canScrollNext: jest.fn(),
  canScrollPrev: jest.fn(),
  containerNode: jest.fn(),
  internalEngine: jest.fn(),
  destroy: jest.fn(),
  off: jest.fn(),
  on: jest.fn(),
  emit: jest.fn(),
  plugins: jest.fn(),
  previousScrollSnap: jest.fn(),
  reInit: jest.fn(),
  rootNode: jest.fn(),
  scrollNext: jest.fn(),
  scrollPrev: jest.fn(),
  scrollProgress: jest.fn(),
  scrollSnapList: jest.fn(),
  scrollTo: jest.fn(),
  selectedScrollSnap: jest.fn(),
  slideNodes: jest.fn(),
  slidesInView: jest.fn(),
  slidesNotInView: jest.fn(),
};

useEmblaCarousel.mockImplementation(() => {
  const emblaRef = useRef();

  return [
    emblaRef,
    emblaApi,
  ] as unknown as emblaCarouselReact.UseEmblaCarouselType;
});

[remy90]

Hey, sorry for the delay.
@hanshank I actually chose not to mock embla-carousel in the end and would go further to ask the question - is mocking actually required or would using the actual implementation in unit tests suffice? As a general rule, I don't write unit tests for 3rd party packages (unless I'm experiencing weird behaviour). If there's sufficient confidence for use in the first place, there's probably unit tests already present. There's also no network/async requests from embla so the next level worth assessing would be e2e

[hanshank]

@remy90 - Thanks for chiming in!

I would agree with you on not writing tests for 3rd party libraries - good call. I'm more so trying to test that my custom component triggers the right embla API functions at the right time. The simplest example would be to make sure that my custom next/prev buttons triggers emblas scrollPrev and scrollNext functions. With the mocking above that turned out to be fairly straight forward. I also have some functionality that happens on the embla select event. But I was able to mock that in the end. If I have any more complex functionality needing testing I might even, like you mentioned, test that part of e2e instead.