leecade / leecade/react-native-swiper

onIndexChange doesn't trigger when running component test

Open
#1,110 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

Which OS ?

Mac Mojave

Version

Which versions are you using:

  • react-native-swiper v?1.6.0-rc.1
  • react-native v0.?.?0.60.5
Expected behaviour

When ScrollTo or ScrollBy are invoked, it updates state. This ultimately triggers UNSAFE_componentWillUpdate which further triggers IndexOnChange. It works fine on emulator.

I've a component that wraps this

const SwiperWithButton = props => (
  <View>
     <Swiper ref={c=>{this.swiper=c} onIndexChange={()=>console.log('changed')}>...</Swiper>
     <Button onPress={()=>{this.swiper.scrollBy(1)/>
)

I want to write a test case to test this functionality. The idea was to fire onPress event and ensure onIndexChanged is triggered. However, this works fine in emulator but when a test case is run, onIndexChange isn't invoked. I tried to put logs and found all logs get printed in ScrollBy but the log in UNSAFE_ComponentWillUpdate doesn't trigger. I am unable to understand why it doesn't triggers in test case when it does while running app.

Actual behaviour

Upon running testcase, onIndexChange should get triggered when button is pressed
I'm using react-native-testing-library to write tests.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the component test that fires the Button onPress, then trace scrollBy through UNSAFE_componentWillUpdate and the onIndexChange callback. Done means the test observes onIndexChange after pressing the button, matching emulator behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.