Swiper/React - Active class not set within unit-test
See original GitHub issueCheck 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:
- Created a year ago
- Reactions:3
- Comments:5
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Unfurtunately the only workaround for this is skip the test 🤦🏻♂️
Sorry to say this. Is unfurtunate, that noone is reacting to this
I am too.