question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swiper/React - Active class not set within unit-test

See original GitHub issue

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/s/jest-testing-react-forked-qxoe7b

Bug description

It seems while in the browser the swiper-slide-active class is set and switches everytime a swipe happened, this bevahiour is not reproducable within a unit test.

My intention is to test if a function was triggered on a slide-change, but since the swiper-slide-active class is not even set in the jsDOM environment, it seems that the swiper is not even properly initiated.

Expected Behavior

The expected behaviour is, that the active class swiper-slide-active is also set when rendering the swiper within a unit test, using jest/react.

Actual Behavior

The swiper-slide-active is never set, which is an indicator, that the swiper container is never properly initiated.

See provided sandbox environment.

Swiper version

8.1.4

Platform/Target and Browser Versions

jsDOM environment

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I’m willing to open a PR

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:3
  • Comments:5

github_iconTop GitHub Comments

5reactions
MarcoLekocommented, Aug 12, 2022

Unfurtunately the only workaround for this is skip the test 🤦🏻‍♂️

Sorry to say this. Is unfurtunate, that noone is reacting to this

0reactions
Brilliantwebdev1125commented, Nov 12, 2022

I am too.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Setting the active slide in swiper/react with react state
I would like to ask if there is a way to control/set the active slide with swiper/react?
Read more >
swiper set active slide | The AI Search Engine You Control
It seems while in the browser the swiper-slide-active class is set and switches everytime a swipe happened, this bevahiour is not reproducable within...
Read more >
Swiper React Components
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
Read more >
CSS Pagination Examples - W3Schools
Highlight the current page with an .active class, and use the :hover selector to change the ... .pagination a:hover:not(.active) {background-color: #ddd;}.
Read more >
Building modern sliders with HTML, CSS, and Swiper
Swiper is available for vanilla JavaScript, Angular, React, Vue.js, and Svelte. ... Note that the class in the Swiper container ".
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found