React Testing Library render() not working with embla-carousel-react v8.0.0-rc7

[MWhiteFearless]

Bug is related to

• embla-carousel-react

Embla Carousel version

• v8.0.0-rc7

Describe the bug

When upgrading from embla-carousel-react v6.2.0 to v8.0.0-rc7, the tests in my repo for components using embla-carousel-react started failing with the error TypeError: undefined is not a function at Array.map (<anonymous>) when calling render() from react testing library

CodeSandbox

- The link to a CodeSandbox that demonstrates the bug clearly.

Steps to reproduce

1. Go to Test tab in the sandbox
2. See that the renders EmblaCarousel test fails with the error

undefined is not a function

TypeError: undefined is not a function
    at Array.map (<anonymous>)

3. Change the embla-carousel-react version to v7.1.0 and refresh the page, see that the renders EmblaCarousel test passes

Expected behavior

The test should pass and the component should render properly.

[davidjerleke]

Hi @MWhiteFearless,

Thank you for your complete bug report. I will look into this when possible.

Beat,
David

[davidjerleke]

Hi @MWhiteFearless,

I haven't investigated this fully but I can think of three things that have changed internally in Embla from v7 --> v8 that can potentially cause problems with React Testing Library:

• Embla is using window.matchMedia in v8.
• Embla is using ResizeObserver in v8.
• Embla is using MutationObserver in v8.
• Embla is using IntersectionObserver in v8.

So let's say you mock window.matchMedia like this. If you run the tests after that and it starts to work or you get a different error, then I'm probably right about my guess.

Best,
David

[MWhiteFearless]

It works by mocking matchMedia! Tests are passing now, thank you! The stackoverflow suggestion worked perfectly for me.

[davidjerleke]

@MWhiteFearless I'm glad it solved the problem. So I'm closing this issue then?

Best,
David

[MWhiteFearless]

Yeah works for me! It could be nice to add a note to the documentation in case others run in to this issue. Really appreciate your help!

[davidjerleke]

@MWhiteFearless thanks for the suggestion. I will add it to the breaking changes section in the release notes for the stable v8 release which is coming soon.

[davidjerleke]

@raphaelApard see my comment.

[raphaelApard]

Thanks a lot @MWhiteFearless for completing this issue and @davidjerleke for your responsiveness !
And by the way, thanks for the great work you do with embla-carousel.