Provided mocking implementation of ScrollView is incomplete

[elyalvarado]

• react-native or expo: react-native
• native-testing-library version: 4.0.2
• jest-preset: @testing-library/react-native
• react-native version: 0.59.8
• node version: 8.16.0

Relevant code or config:

// Oversimplifying a bit for this sample
const LongScrollView = () => {
  const scrollViewRef = React.createRef();
  const scrollToEnd = () => scrollViewRef.current.scrollToEnd()
  return (
    <ScrollView ref={scrollViewRef}>
       <Button onPress={scrollToEnd}><Text>Go to End</Text></Button>
       <Text>Very large piece of content</Text>
       <Text>EndOfScroll</Text>
    </ScrollView>
  )
}

test('goes to end on pressing the button', () => {
    const { getByText } = render(<LongScrollView />)
    const button = getByText('Go to End')
    fireEvent.press(button)
    expect(getByText('EndOfScroll')).not.toThrowError()
})

What you did:

Try to test user behavior where a ScrollView goes to the end after certain interactions

What happened:

While trying to test a component using the provided jest-preset I'm getting the following error. If I use the react-native preset (or if I remove ScrollView from the coreComponents config for native-testing-library) the error doesn't happen.

TypeError: Cannot read property 'Commands' of undefined

    at Component.scrollResponderScrollToEnd (/home/dev/X/node_modules/react-native/Libraries/Components/ScrollResponder.js:465:7)
    at Object.scrollResponderScrollToEnd [as scrollToEnd] (/home/dev/X/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js:274:30)
    at Object.scrollToEnd [as onDateChange] (/home/dev/X/App/containers/Profile.tsx:209:26)

Problem description:

The provided ScrollView mock is using the same mockComponent behaviour that all other native components, however the ScrollView is a little different in that the mock provided by react-native itself in their jest-preset refers to its own mock implementation: '../Libraries/Components/ScrollView/mocks/ScrollViewMock',

Suggested solution:

I don't have a suggested solution, except a temporary work-around: comment out ScrollView from the coreComponents configuration until a definitive solution is found.

[bcarroll22]

In summary, this is one of the major fundamental issues with this library vs. DOM Testing Library. Since this library isn't backed by a virtual platform, like a JSDom, and it just leverages react-test-renderer, things like this inherently just don't work. There's no actual node "ref" that backs this type of behavior, so although you're correct that it doesn't "crash" while using the react-native jest preset, it also just... well... doesn't actually do anything 🤷‍♂️

That text that you're looking for in your example is always "there" in the test. Even if you were to query for it without "scrolling", it's always there. Same with any scroll event really, you can fire it, but it's not actually "scrolling" anything. Since we don't completely fake out the ScrollView component like the RN preset does, it's trying to do an imperative action on a thing that it doesn't know how to imperatively control.

My point is, there's a problem one way or another. The way this preset handles it, nothing happens but it also fails the test because this type of imperative behavior isn't actually possible. The React Native preset way, nothing happens, but most users will probably think something did, which will unfortunately create false positives in test cases.

I think for the most use cases, I like the way we handle it currently better; unless you can come up with a good solution that doesn't completely fake components the way the React Native preset does. What I might suggest, and would love to see actually (and would even include it in the docs site 😄), would be an ecosystem jest preset that does some more comprehensive handling of mocking the platform and components. Might be something @lewie9021 would be interested in collaborating on?

[elyalvarado]

Yes, I know the actual scrollToEnd is doing nothing, and maybe I wasn't clear that my provided sample test is not actually what I'm doing, but a case that will fail. I'm just doing some other user behavior that triggers an scrollToEnd, but I'm not actually testing for it specifically. However, the fact that the code calls scrollToEnd prevents everything to pass through that point in my test, so it prevents me from testing part of my app.
If I understand you, your suggestion in my case will be to mock again ScrollView back to the original react-native/jest-preset? If so, is there any easy way to do it for a particular test without having to copypasta the original mocking implementation from the react-native source code?

[elyalvarado]

Also, some other native methods (focus, blur, setNativeProps, measure, etc...) are being mocked in the same way (do nothing), is just that scrollToEnd is not common and only applies to ScrollView which causes this test to fail.

[elyalvarado]

BTW, I'm just making questions to understand better how to do this stuff sticking as much as possible to the testing-library philosophy, not to be annoying.
I'm really thankful for your work on this library, and want to keep learning and contributing to it as much as I can.

[bcarroll22]

Oh yeah no trouble at all! I appreciate the conversation. Honestly, although I personally don't have a great solution, issues like this make me excited because folks like you using the library are so comfortable that your tests match the way your application works for users 90+% of the time that you really want to try to solve the very difficult to solve ~10%. That's why I think we can reach a good solution.

So, all of those methods you referenced are part of the NativeMethodsMixin and I don't believe the scroll methods exist on that mixin, so I don't think that would be a good place for those things.

My suggestion is that there's been a reasonable interest from folks to have a more comprehensive mock of the React Native platform. I don't believe that belongs in this library, because it's meant to be lightweight and cover the majority use-case without getting too heavy-handed, but at the same time I think there's a huge opportunity to build something like that so that folks using this library could leverage it. So while I think I'll probably always keep a light-weight jest preset bundled here, I believe there's a huge opportunity to create a more complex one that's maintained by the community. I'd love to see it!

[bcarroll22]

I suppose also, in reference to the guiding principles, since the ScrollView has no event that gets fired when you reach the end, could you give me a bit more contextual idea of what exactly you're trying to test for? What's the user see that you're trying to assert on? There might be a simpler solution in the short term even.

[elyalvarado]

In this particular case I have a form where a DatePicker is the last field, once the user chooses a date the ScrollView scrollToEnd is called to make sure the "Submit" button is shown.

The problem I've right now is that the date field is mandatory so creating tests that 'fill' the date field end up invoking the scrollToEnd method and throwing an exception before the test completes.

I'm also already testing (implicitly) the actual 'scrollToEnd' behavior in my e2e tests with detox, so in this particular case I'm more worried about keeping my current tests working than testing the actual scrolling which I know is not possible with react-test-renderer.

[bcarroll22]

Wanted to circle back on this. This answer is also relevant to #26.

Basically, I do believe that there needs to be a more complete mock of the react native platform for the sake of writing tests with complete confidence. Unfortunately, given the amount of time I’ve already committed to maintaining this project and jest-native, I won’t be able to create it. Honestly, I don’t even really like that this project has a bundled jest preset, my intent has always been to split it out eventually and hopefully find another maintainer/owner for it.

What React Native really needs is something similar to JSDOM that can do a great job of emulating a native experience in the test environment. It’s really cool to me that this library has been exposing some of those pain points because of the possibilities it has unlocked! The downside to it, is I just don’t think I have the time.

So what I’m going to do is close this issue, because its a very specific part of a bigger problem, which is that React Native just doesn’t have a great mock platform currently. I’d like to see a discussion somewhere about an effort to build a better mock platform, maybe we can open another umbrella issue here? The hardest part is going to be getting the ball rolling and creating the base project to work from.

Sorry it took so long to circle back, this is something I want to make sure we get right because I do believe it’s an extremely important part of the future of this library. I don’t have a specific solution for this problem unfortunately, because I think this is something that needs addressed holistically. Let’s continue to work together to figure this out, though 💯