[Bug]: TypeError: Cannot read properties of undefined (reading 'map') in AutoHeight

[suraj776]

Which variants of Embla Carousel are you using?

• 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)

Steps to reproduce

I'm trying to create a integration test using React Testing library.

Error:- I'm getting.

detail: TypeError: Cannot read properties of undefined (reading 'map')
at map (/node_modules/embla-carousel-auto-height/src/components/AutoHeight.ts:51:8)
at highestInView (/node_modules/embla-carousel-auto-height/src/components/AutoHeight.ts:56:48)

I tried all these mocks in my file. it didn't work. Also tried mocking the autoheight, then emblaCrousel started giving error.

https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel/src/__tests__/mocks

Expected Behavior

It should be mockable when applying mocks.

Additional Context

I have also tried...

What browsers are you seeing the problem on?

All browsers

Version

^8.2.0

CodeSandbox

No response

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for bug reports

[davidjerleke]

@suraj776 have you created the necessary mocks? See:

• [Bug]: Jest testing bug return TypeError: undefined is not a function #837 (comment)
• [Help]: React testing library with embla-carousel #775

[suraj776]

@davidjerleke yes, i do have all the mocks. Still getting error and it is from AutoHeight plugin.If i remove plugin, test cases do work.

[davidjerleke]

Thanks for clarifying @suraj776. I guess we need a null check here in the code.

[suraj776]

@davidjerleke actually here, here you need to add null check before map.

[davidjerleke]

@suraj776 no here, because we're mapping the selectedIndexes variable which is undefined. We could do:

- const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()]
+ const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()] || []

But that might lead to errors in other places. Like the function that depends on the highestInView() function:

function setContainerHeight(): void {
  emblaApi.containerNode().style.height = `${highestInView()}px`
}

Can you create a CodeSandbox that reproduces the problem? If you do I can solve it faster.

[suraj776]

@davidjerleke

Please check this sandbox code.
https://codesandbox.io/p/devbox/elegant-moser-forked-psvcn3

run command

npm run test

[davidjerleke]

@suraj776 thanks. That helps. So this solves it:

function highestInView(): number | null {
  const { slideRegistry } = emblaApi.internalEngine()
  const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()]

  if (!selectedIndexes) return null // Bail here if no selectedIndexes are found

  return selectedIndexes
    .map((index) => slideHeights[index])
    .reduce((a, b) => Math.max(a, b), 0)
}

function setContainerHeight(): void {
  const height = highestInView()
  if (height === null) return // Bail here if we don't have any height to apply

  emblaApi.containerNode().style.height = `${highestInView()}px`
}

Feel free to create a PR with the solution above.

Best,
David

[suraj776]

@davidjerleke, Thanks for quick support.

[davidjerleke]

@suraj776 I just released a bug fix for this in v8.3.1.